struct WallpaperSlider: HtmlProducer {

    static let frameHeight = 585

    static let frameWidth = 270

    static let imageWidth = 250

    static let imageHeight = 500

    let frame: Frame

    let images: [Image]

    let id: String

    struct Frame {

        let alt: String

        let x1: ImageVersion

        let x2: ImageVersion

        init(frame: FileResource, language: ContentLanguage, results: PageGenerationResults) {
            self.x1 = frame.imageVersion(
                width: WallpaperSlider.frameWidth * 2,
                height: WallpaperSlider.frameHeight * 2,
                type: frame.type)

            self.x2 = frame.imageVersion(
                width: WallpaperSlider.frameWidth * 2,
                height: WallpaperSlider.frameHeight * 2,
                type: frame.type)

            self.alt = frame.localized(in: language) ?? "A frame"

            results.require(image: x1)
            results.require(image: x2)
        }
    }

    struct Image {

        let display: ImageSet

        let wide: DownloadImage

        let tall: DownloadImage

        struct DownloadImage {

            let url: String

            let button: String
        }

        init(tall: FileResource, wide: FileResource, language: ContentLanguage, results: PageGenerationResults) {
            self.display = tall.imageSet(
                width: WallpaperSlider.imageWidth,
                height: WallpaperSlider.imageHeight,
                language: language)
            let wideButton = language == .english ? "Wide" : "Breit"
            self.wide = .init(url: wide.absoluteUrl, button: wideButton)

            let tallButton = language == .english ? "Tall" : "Hoch"
            self.tall = .init(url: tall.absoluteUrl, button: tallButton)

            results.require(imageSet: display)
            results.require(file: wide)
            results.require(file: tall)
            results.require(icon: .buttonDownload)
        }
    }

    func populate(_ result: inout String) {
        let icon: PageIcon = .buttonDownload

        result += "<div class='swiper-container'>"
        result += "<img class='overlay-image' srcset='\(frame.x2.outputPath) 2x' src='\(frame.x1.outputPath)' \(frame.alt)/>"
        result += "<div id='wallpaper-\(id)' class='swiper'><div class='swiper-wrapper'>"
        for image in images {
            result += "<div class='swiper-slide'>"
            image.display.populate(&result)
            result += "<div class='button-container'>"
            result += "<a class='tag custom-button' href='\(image.tall.url)' download>\(icon.usageString)\(image.tall.button)</a>"
            result += "<a class='tag custom-button' href='\(image.wide.url)' download>\(icon.usageString)\(image.wide.button)</a>"
            result += "</div></div>" // Close button-container, swiper-slide
        }
        result += "</div>" // Close swiper-wrapper
        result += "<div class='swiper-button-next'></div>"
        result += "<div class='swiper-button-prev'></div>"
        result += "</div>" // Close swiper
        result += "</div>" // Close swiper-container
    }

    var style: String {
        """
        .swiper {
            overflow: hidden;
            border-radius: 10px;
        }
        .swiper-container {
            position: relative;
            max-width: 250px;
            max-height: 500px;
            margin: auto;
            margin-top: 40px;
            aspect-ratio: 1 / 2;
        }

        .overlay-image {
            position: absolute;
            top: -8.5%;
            left: -4%;
            width: 108%;
            height: 117%;
            z-index: 10;
            object-fit: contain;
            pointer-events: none;
        }
        .button-container {
            position: absolute;
            bottom: 15%;
            width: 100%;
            margin: auto;
            display: flex;
            justify-content: space-evenly;
        }
        .custom-button {
            padding: 10px 10px;
            width: 60px;
            border: none;
            border-radius: 10px;
            background-color: rgba(29, 29, 29, 0.74);
            color: white;
            cursor: pointer;
            text-decoration: none;
            font-size: 12px;
            justify-content: space-evenly;
        }
        .swiper-button-next {
            margin-right: 5px;
        }
        .swiper-button-prev {
            margin-left: 5px;
        }
        """
    }

    var script: String {
        """
        <script>
        window.onload = () => {
            var swiper_\(id) = new Swiper("#wallpaper-\(id)", {
                loop: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        };
        </script>
        """
    }
}