enum KnownHeaderElement: Int {

    case codeHightlighting = 4

    case modelViewer = 3

    /// CSS File to style the audio player
    case audioPlayerCss = 1

    /// JavaScript file for the audio player
    case audioPlayerJs = 2

    case imageCompareJs = 5

    case imageCompareCss = 6

    func header(content: Content) -> HeaderElement? {
        switch self {
        case .codeHightlighting:
            if let file = content.settings.pages.codeHighlightingJsFile {
                return HeaderElement.js(file: file, defer: true)
            }
        case .modelViewer:
            if let file = content.settings.pages.modelViewerJsFile {
                return HeaderElement.jsModule(file)
            }
        case .audioPlayerCss:
            if let file = content.settings.pages.audioPlayerCssFile {
                return .css(file: file, order: HeaderElement.audioPlayerCssOrder)
            }
        case .audioPlayerJs:
            if let file = content.settings.pages.audioPlayerJsFile {
                return .js(file: file, defer: true)
            }
        case .imageCompareJs:
            if let file = content.settings.pages.imageCompareJsFile {
                return .js(file: file, defer: true)
            }
        case .imageCompareCss:
            if let file = content.settings.pages.imageCompareCssFile {
                return .css(file: file, order: HeaderElement.imageCompareCssOrder)
            }
        }
        return nil
    }
}

extension KnownHeaderElement: Comparable {

    static func < (lhs: KnownHeaderElement, rhs: KnownHeaderElement) -> Bool {
        lhs.rawValue < rhs.rawValue
    }
}

extension KnownHeaderElement: CustomStringConvertible {

    var description: String {
        switch self {
        case .codeHightlighting:
            return "code-highlighting"
        case .modelViewer:
            return "model-viewer"
        case .audioPlayerCss:
            return "audio-player-css"
        case .audioPlayerJs:
            return "audio-player-js"
        case .imageCompareJs:
            return "image-compare-js"
        case .imageCompareCss:
            return "image-compare-css"
        }
    }
}