import { PropsRender } from "../../types.js";
import jackpot from "../jackpot/index.js"
import settings, { setSettings } from "../settings/index.js"
import { createWidgetDOM } from "./model.js"
import { mountDOM } from "./styles/1.js";
import { mountDOM as style1 } from "./styles/1.js";;
import { mountDOM as style2 } from "./styles/2.js";;
import { mountDOM as style3 } from "./styles/3.js";;

const models: any = [mountDOM, style1, style2, style3]
const styleFiles: any = [
    'https://joobacdn.pages.dev/cdn/styles/box/style1.css',
    'https://joobacdn.pages.dev/cdn/styles/box/style1.css',
    'https://joobacdn.pages.dev/cdn/styles/circle/style3.css',
    'https://joobacdn.pages.dev/cdn/styles/light/style1.css'
]


function display(props?: PropsRender) {
    const { root: rootProps, style: styleProps, media, disableWidgetDrag } = props || {}
    const rootDiv: HTMLDivElement | any = document.getElementById('jooba-container-root') as HTMLDivElement | null
    const root = settings.get().root || rootProps || rootDiv || document.getElementsByTagName('body')[0] as any
    setSettings('root', root)
    const { widgetDesign } = jackpot.get()
    if (!rootProps && !rootDiv) {
        console.warn('Not provided a div with id="jooba-container-root" to widget be implemented, so jooba used the document.body like root')
    }
    createWidgetDOM(root)
    if (styleProps && styleProps.src) {
        models[styleProps.model || 0](root, styleProps.src, media, disableWidgetDrag)
    } else {
        models[styleProps?.model || widgetDesign]
            ? models[styleProps?.model || widgetDesign](root, styleFiles[styleProps?.model || widgetDesign] || styleFiles[0], media, disableWidgetDrag)
            : models[0](root, styleFiles[styleProps?.model || widgetDesign] || styleFiles[0], media, disableWidgetDrag)   //default style if not exists the design from jackpot
    }
}

export default display