import Elementary

/// A decorative inline SVG stroke icon, drawn in the current text colour.
struct Icon: HTML {

    // MARK: Properties

    /// The glyph the icon draws.
    let glyph: Glyph

    /// The icon's rendered width and height, in pixels.
    let size: Int

    /// The stroke width, or `nil` for the glyph's own.
    let weight: String?

    // MARK: Initializers

    /// Creates an icon.
    /// - Parameters:
    ///   - glyph: the glyph the icon draws.
    ///   - size: the icon's rendered width and height, in pixels; 20 by default.
    ///   - weight: the stroke width, or `nil` (the default) for the glyph's own.
    init(
        _ glyph: Glyph,
        size: Int = 20,
        weight: String? = nil
    ) {
        self.glyph = glyph
        self.size = size
        self.weight = weight
    }

    // MARK: Computed

    /// Rendered raw: the markup is static, never user input.
    var body: some HTML {
        HTMLRaw(
            """
            <svg class="icon" width="\(size)" height="\(size)" viewBox="0 0 24 24" fill="none" stroke="currentColor" \
            stroke-width="\(weight ?? glyph.strokeWidth)" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">\(glyph.shapes)</svg>
            """
        )
    }

}

// MARK: - Enumerations

extension Icon {
    /// A glyph an ``Icon`` can draw.
    enum Glyph {
        /// A bell.
        case bell
        /// A bookmark.
        case bookmark
        /// A check mark.
        case check
        /// A cross.
        case close
        /// A page of text.
        case document
        /// Filter lines.
        case filter
        /// A key.
        case key
        /// A padlock.
        case lock
        /// A speech bubble.
        case message
        /// A magnifying glass.
        case search
        /// A shopfront.
        case shop
        /// Sort arrows.
        case sort
    }
}

extension Icon.Glyph {

    // MARK: Computed

    /// The shapes the glyph is drawn with.
    var shapes: String {
        switch self {
        case .bell: #"<path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"></path><path d="M10 21h4"></path>"#
        case .bookmark: #"<path d="M6 3h12v18l-6-4-6 4z"></path>"#
        case .check: #"<path d="m5 12 5 5 9-10"></path>"#
        case .close: #"<path d="M6 6l12 12M18 6 6 18"></path>"#
        case .document: #"<rect x="5" y="3" width="14" height="18" rx="1"></rect><path d="M9 8h6M9 12h6M9 16h3"></path>"#
        case .filter: #"<path d="M4 6h16M7 12h10M10 18h4"></path>"#
        case .key: #"<circle cx="7.5" cy="15.5" r="4.5"></circle><path d="M10.7 12.3 21 2"></path><path d="m18 5 3 3"></path><path d="m15 8 3 3"></path>"#
        case .lock: #"<rect x="5" y="11" width="14" height="10" rx="1"></rect><path d="M8 11V7a4 4 0 0 1 8 0v4"></path>"#
        case .message: #"<path d="M4 5h16v11H8l-4 4z"></path>"#
        case .search: #"<circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path>"#
        case .shop: #"<path d="M3 9.5 12 4l9 5.5"></path><path d="M5 10v9h14v-9"></path><path d="M10 19v-5h4v5"></path>"#
        case .sort: #"<path d="M7 4v16M7 20l-3-3M7 20l3-3M17 20V4M17 4l-3 3M17 4l3 3"></path>"#
        }
    }

    /// The glyph's stroke width; heavier for glyphs drawn small.
    var strokeWidth: String {
        switch self {
        case .check: "3.5"
        case .close, .filter, .key, .search, .sort: "2.2"
        default: "2"
        }
    }

}