import Foundation

/**
 An image that is part of the page content.

 A tap/click on the image shows a fullscreen version of the image, including an optional caption.
 */
struct PageImage: HtmlProducer {

    /// The HTML id attribute used to enable fullscreen images
    let imageId: String

    /// The small version of the image visible on the page
    let thumbnail: ImageSet

    /// The large version of the image for fullscreen view
    let largeImage: ImageSet

    /// The optional caption text below the fullscreen image
    let caption: String?

    /// The id of the image container
    let id: String?

    /// Additional class names for the image container
    let className: String?

    /// Additional content for the image container
    let imageContent: String?

    init(imageId: String, thumbnail: ImageSet, largeImage: ImageSet, caption: String?, id: String? = nil, className: String? = nil, imageContent: String? = nil) {
        self.imageId = imageId
        self.thumbnail = thumbnail
        self.largeImage = largeImage
        self.caption = caption
        self.id = id
        self.className = className
        self.imageContent = imageContent
    }

    var idString: String {
        guard let id else { return "" }
        return " id='\(id)'"
    }

    var classString: String {
        guard let className else { return "" }
        return " \(className)"
    }

    func populate(_ result: inout String) {
        result += "<div\(idString) class='content-image\(classString)' onclick=\"document.getElementById('\(imageId)').classList.add('active')\">"
        result += thumbnail.content
        if let imageContent {
            result += imageContent
        }
        result += "</div>"
        result += "<div id='\(imageId)' class='fullscreen-image' onclick=\"document.getElementById('\(imageId)').classList.remove('active')\">"
        result += largeImage.content
        if let caption {
            result += "<div class='caption'>\(caption)</div>"
        }
        result += "<div class='close'></div>"
        result += "</div>"
    }
}