import Foundation

struct ImageGallery {

    let id: String

    let images: [FeedEntryData.Image]

    init(id: String, images: [FeedEntryData.Image]) {
        self.id = id
        self.images = images
    }

    func addContent(to result: inout String) {
        guard !images.isEmpty else {
            return
        }

        result += "<div id=\"s\(id)\" class=\"swiper\"><div class=\"swiper-wrapper\">"

        guard images.count > 1 else {
            let image = images[0]
            result += "<div class=\"swiper-slide\"><img src=\(image.mainImageUrl) loading=\"lazy\" alt=\"\(image.altText.htmlEscaped())\"></div>"
            result += "</div></div>" // Close swiper, swiper-wrapper
            return
        }

        for image in images {
            // TODO: Use different images based on device
            result += "<div class=\"swiper-slide\">"
            result += "<img src=\(image.mainImageUrl) loading=\"lazy\" alt=\"\(image.altText.htmlEscaped())\">"
            result += "<div class=\"swiper-lazy-preloader swiper-lazy-preloader-white\"></div>"
            result += "</div>" // Close swiper-slide
        }

        result += "<div class=\"swiper-button-next\"></div>"
        result += "<div class=\"swiper-button-prev\"></div>"
        result += "<div class=\"swiper-pagination\"></div>"
        result += "</div></div>" // Close swiper, swiper-wrapper
    }

    static func swiperInit(id: String) -> String {
        """
        var swiper\(id) = new Swiper("#\(id)", {
              loop: true,
              slidesPerView: 1,
              spaceBetween: 30,
              centeredSlides: true,
              keyboard: { enabled: true },
              pagination: {
                el: "#\(id) .swiper-pagination",
                clickable: true
              },
              navigation: {
                nextEl: "#\(id) .swiper-button-next",
                prevEl: "#\(id) .swiper-button-prev"
              }
            });
        """
    }
}

/*
extension ImageGallery: HTML {

    var content: some HTML {
        div(.id(id), .class("swiper")) {
            div(.class("swiper-wrapper")) {
                for image in images {
                    div(.class("swiper-slide")) {
                        // TODO: Use different images based on device
                        img(.src(image.mainImageUrl), .lazyLoad)
                        div(.class("swiper-lazy-preloader"), .class("swiper-lazy-preloader-white")) { }
                    }
                }
            }
            div(.class("swiper-button-next")) { }
            div(.class("swiper-button-prev")) { }
            div(.class("swiper-pagination")) { }
        }
    }
}
*/