import Foundation

struct ImageGallery {

    let id: String

    let images: [FeedEntryData.Image]

    private var htmlSafeId: String {
        ImageGallery.htmlSafe(id)
    }

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

    private func imageCode(_ image: FeedEntryData.Image) -> String {
        //return "<img src='\(image.mainImageUrl)' loading='lazy' alt='\(image.altText.htmlEscaped())'>"
        var result = "<picture>"
        result += "<source type='image/avif' srcset='\(image.avif1x) 1x, \(image.avif2x) 2x'/>"
        result += "<source type='image/webp' srcset='\(image.webp1x) 1x, \(image.webp2x) 2x'/>"
        result += "<img srcset='\(image.jpg2x) 2x' src='\(image.jpg1x)' loading='lazy' alt='\(image.altText.htmlEscaped())'/>"
        result += "</picture>"
        return result
    }

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

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

        guard images.count > 1 else {
            result += imageCode(images[0])
            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 += imageCode(image)

            result += "<div class='swiper-lazy-preloader swiper-lazy-preloader-white'></div>"

            result += "</div>" // Close swiper-slide
        }

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

    private static func htmlSafe(_ id: String) -> String {
        id.replacingOccurrences(of: "-", with: "_")
    }

    static func swiperInit(id: String) -> String {
        let id = htmlSafe(id)
        return """
        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")) { }
        }
    }
}
*/