struct RouteViews: HtmlProducer {

    let localization: RouteLocalization

    /// The HTML id attribute used to enable fullscreen images
    let map: PageImage

    let displayedTypes: Set<RouteStatisticType>

    let mapId: String

    let mapTitle: String?

    let filePath: String

    let chartId: String

    let chartTitle: String?

    init(localization: RouteLocalization,
         chartTitle: String?,
         chartId: String,
         displayedTypes: Set<RouteStatisticType>,
         mapTitle: String?,
         mapId: String,
         filePath: String,
         imageId: String,
         thumbnail: ImageSet,
         largeImage: ImageSet,
         caption: String?
    ) {
        self.localization = localization
        self.displayedTypes = displayedTypes
        self.mapId = mapId
        self.filePath = filePath
        self.map = PageImage(
            imageId: imageId,
            thumbnail: thumbnail,
            largeImage: largeImage,
            caption: caption,
            id: mapId,
            className: "map-container",
            imageContent: "<div class='marker'></div>")
        self.chartTitle = chartTitle
        self.chartId = chartId
        self.mapTitle = mapTitle
    }

    private func button(series: RouteStatisticType) -> String {
        let label = localization.statistics[series]!
        return "<button data-type='\(series.id)' unit='\(series.unit)' name='\(label)'>\(series.icon.usageString)<span class='label'>\(label)</span></button>"
    }

    func populate(_ result: inout String) {
        if let mapTitle {
            result += "<h2>\(mapTitle)</h2>"
        }
        map.populate(&result)

        let series = displayedTypes.sorted()
        guard !series.isEmpty else {
            return
        }
        if let chartTitle {
            result += "<h2>\(chartTitle)</h2>"
        }
        result += "<div id='\(chartId)' class='charts'>"
        result += "<div class='picker icon-picker y-picker'>"
        for type in series {
            result += button(series: type)
        }
        result += "</div>" // Picker
        result += "<div class='graph'>"
        result += "<canvas>"
        result += "<div class='fallback'>\(localization.fallback)</div>"
        result += "</canvas>"
        result += "<div class='line'></div>"
        result += "<div class='tooltip'></div>"
        result += "<div class='load-error'>\(localization.loadFail)</div>"
        result += "</div>" // Graph
        result += "<div class='picker text-picker x-picker'>"
        result += "<button data-type='distance' unit='km'>\(localization.distance)</button>"
        result += "<button data-type='duration' unit='\(localization.hourUnit)'>\(localization.duration)</button>"
        result += "<button data-type='time' unit=''>\(localization.time)</button>"
        result += "</div>" // Picker
        result += "</div>" // Chart
    }

    var script: String {
        """
        <script>
            window.addEventListener('DOMContentLoaded', () => {
                initializeGraphs(document, '\(mapId)', '\(chartId)', '\(filePath)');
            });
        </script>
        """
    }
}