import { SetMediaProps } from "../../../types.js"
import actions from "../../actions/index.js"
import events from "../../events/index.js"
import displayInfoPopup from "../../infoPopup/index.js"
import jackpot from "../../jackpot/index.js"
import { getSettings } from "../../settings/index.js"
import media from "../media.js"
import { widgetDOM } from "../model.js"
import texts from "../texts.js"

function enableDragWidget() {
    actions.drag(widgetDOM.widgetWrapper)
}

function bindActions() {
    widgetDOM.widgetMaximizeButton.onclick = () => {
        widgetDOM.widgetMaximizeButton.setAttribute('hidden', 'true')
        widgetDOM.widgetMinimizeButton.removeAttribute('hidden')
        widgetDOM.widgetBody.removeAttribute('hidden')
        widgetDOM.widgetFooter.removeAttribute('hidden')
    }
    widgetDOM.widgetMinimizeButton.onclick = () => {
        widgetDOM.widgetMinimizeButton.setAttribute('hidden', 'true')
        widgetDOM.widgetMaximizeButton.removeAttribute('hidden')
        widgetDOM.widgetBody.setAttribute('hidden', 'true')
        widgetDOM.widgetFooter.setAttribute('hidden', 'true')
    }

    widgetDOM.widgetButtonOptIn.onclick = () => {
        actions.optin()
    }
    widgetDOM.widgetButtonOptOut.onclick = () => {
        actions.optOut()
    }
    widgetDOM.widgetInfoButton.onclick = () => displayInfoPopup()
    widgetDOM.widgetCloseButton.onclick = () => {
        if (window.confirm(texts.get().closeWidgetConfirmMessage)) {
            widgetDOM.widgetWrapper.remove();
            actions.destroy();
        }
    }
}

function fillElements(customMedia: SetMediaProps, disableWidgetDrag?: boolean) {
    const { optInButton, optOutButton } = texts.get()
    const { amount } = jackpot.get()
    widgetDOM.widgetButtonOptIn.innerHTML = optInButton
    widgetDOM.widgetButtonOptOut.innerHTML = optOutButton
    widgetDOM.widgetCloseButton.innerHTML = 'X'
    widgetDOM.widgetMinimizeButton.innerHTML = '_'
    widgetDOM.widgetMaximizeButton.innerHTML = '❐'
    widgetDOM.widgetMaximizeButton.setAttribute('hidden', 'true')
    widgetDOM.widgetButtonOptOut.setAttribute('hidden', 'true')
    widgetDOM.widgetInfoButton.innerHTML = '?'
    if (customMedia?.key === 'widget') {
        media.set(customMedia)
    } else {
        media.set({ key: 'widget', src: 'https://joobacdn.pages.dev/cdn/lottie/cash.json', type: 'lottie' })
    }
    actions.updateAmount(0, amount)
    bindActions()
    if (!disableWidgetDrag) {
        enableDragWidget()
    }
}



function mountDOM(root: HTMLDivElement, styleUrlFile: string, media: SetMediaProps, disableWidgetDrag: boolean) {
    widgetDOM.widgetWrapper.appendChild(widgetDOM.widget)
    widgetDOM.widget.appendChild(widgetDOM.widgetHeader)
    widgetDOM.widgetHeader.appendChild(widgetDOM.widgetCurrentAmount)
    widgetDOM.widgetHeader.appendChild(widgetDOM.widgetActionsBar)
    widgetDOM.widgetActionsBar.appendChild(widgetDOM.widgetInfoButton)
    widgetDOM.widgetActionsBar.appendChild(widgetDOM.widgetMinimizeButton)
    widgetDOM.widgetActionsBar.appendChild(widgetDOM.widgetMaximizeButton)
    widgetDOM.widgetActionsBar.appendChild(widgetDOM.widgetCloseButton)
    widgetDOM.widget.appendChild(widgetDOM.widgetBody)
    widgetDOM.widgetBody.appendChild(widgetDOM.widgetMediaWrapper)
    widgetDOM.widgetBody.appendChild(widgetDOM.widgetInfoLabelWrapper)
    widgetDOM.widget.appendChild(widgetDOM.widgetFooter)
    widgetDOM.widgetFooter.appendChild(widgetDOM.widgetButtonsOptWrapper)
    widgetDOM.widgetButtonsOptWrapper.appendChild(widgetDOM.widgetButtonOptIn)
    widgetDOM.widgetButtonsOptWrapper.appendChild(widgetDOM.widgetButtonOptOut)
    actions.setStyleFile(styleUrlFile).then(() => {
        root.appendChild(widgetDOM.widgetWrapper)
        fillElements(media, disableWidgetDrag)
        events.callback('mount', widgetDOM)
        if (getSettings().optIn) {
            actions.optin()
        }
    })
}


export { mountDOM }