// The loader parses a DOM node and detects which resource (script, style, image, ...) needs to be loaded from it

import type {
    NodeMapping,
} from '../types/load.d.ts';

// TODO: specifying ext makes sense for inlined script to convey as what kind of content this should be treated as (i.e. is the inlined script JSX/Typescript/..., or the inlined style CSS/PCSS/SASS. Might be prerrable to support a 'compile-time' ext-attribute on the node)
// but in the case of href/src references, it makes more sense to add it as a meta-data property (conveying how we expect it to be loaded) and the existing filename left as is.
export const KnownMappings : {[name: string]: NodeMapping} = {
    externalScript: {
        tagName: 'script',
        attr: 'src',
        loadType: 'entryChunk' // TODO: assuming entryChunk is always the right option for now. However we might want to switch to just chunk and leave it to the rollup to decide if this script should be inlined or not.
    },
    inlinedScript: {
        tagName: 'script',
        body: true,
        ext: 'js',
        loadType: 'chunk'
    },
    externalStylesheet: {
        tagName: 'link',
        match: {
            attr: {
                rel: 'stylesheet'
            },
        },
        attr: 'href',
    },
    inlinedStylesheet: {
        tagName: 'style',
        body: true,
        ext: 'css',
    },

    externalResource: { // i.e favicons.
        tagName: 'link',
        match: {
            attr: {
                rel: /^(?!.*stylesheet$)/ // Anything that is not rel="stylesheet",
            }
        },
        attr: 'href'
        // Could probably use finetuning, see possible values: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel
    },

    externalImage: {
        tagName: 'img',
        attr: 'src',
    },

    link: {
        tagName: 'a',
        attr: 'href',
    },
    iframe: {
        tagName: 'iframe',
        attr: 'src',
    },

    videoSource: {
        tagName: 'source',
        attr: 'src'
    },
    subtitle: {
        tagName: 'track',
        attr: 'src'
    },
    audio: {
        tagName: 'audio',
        attr: 'src'
    },

    portal: {
        tagName: 'portal',
        attr: 'src',
    },

    object: {
        tagName: 'object',
        attr: 'data'
    }
}
export type KnownMappingTypes = keyof typeof KnownMappings;

export const defaultMapping: NodeMapping[] = [
    // Scripts
    KnownMappings.externalScript,
    KnownMappings.inlinedScript,

    // Stylesheet
    KnownMappings.externalStylesheet,
    KnownMappings.inlinedStylesheet,

    // Images, svgs
    KnownMappings.externalImage,

    // Links
    // knownMappings.link,
    // knownMappings.iframe, // Very unlikely to become a default, but who knows if someone has a valid use for this

    // Media
    KnownMappings.videoSource,
    KnownMappings.subtitle,
    KnownMappings.audio,

    // Misc
    // knownMappings.portal,// <portal src="..."> An experimental feature to replace valid use cases for iframes? Might want to [look into it...](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/portal)
    // knownMappings.object,// <object data="..."> Not sure what to do with this, is this still commonly used? Any valid use-case for this? [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object)
]