import jackpot from "../jackpot/index.js";
import anime from 'animejs';
import { widgetDOM } from "../widget/model.js";
import texts from "../widget/texts.js";
import events from "../events/index.js";
import log from "../../log.js";
import media from "../widget/media.js";
import urls from "../urls/index.js";
import settings from "../settings/index.js";
import SockJS from "sockjs-client";
import Stomp from '../../libs/stomp.js'
import { BetJackpot, winResponse } from "../../types.js";
import api from "../api/index.js";
import { defineAndDisplayWin, displayMainWinner } from "../winAnimations/index.js";

function updateAmount(currentAmount: number, amount: number) {
    const { currency } = jackpot.get()
    if (amount === currentAmount) {
        return null
    }
    log(`action: update amount init from ${currentAmount} to ${amount}`)

    anime({
        targets: widgetDOM.widgetCurrentAmount,
        textContent: currentAmount,
        value: [currentAmount, amount],
        round: 1,
        duration: 2000,
        easing: 'easeInOutQuad',
        update: function (a: any) {
            const _value = amount < currentAmount ? currentAmount - ((currentAmount - amount) / 100 * a.progress) : currentAmount + ((amount - currentAmount) / 100 * a.progress);
            if (a.progress === 100) {
                widgetDOM.widgetCurrentAmount.innerHTML = new Intl.NumberFormat([], { style: 'currency', currency: currency || 'usd', currencyDisplay: 'narrowSymbol' } as any).format(amount)
                log(`action: update amount finish from ${currentAmount} to ${amount}`)
                jackpot.update('amount', amount)
                events.callback('updateAmount', amount)
            } else {
                widgetDOM.widgetCurrentAmount.innerHTML = new Intl.NumberFormat([], { style: 'currency', currency: currency || 'usd', currencyDisplay: 'narrowSymbol' } as any).format(_value)
            }
        },
    })

}


function betJackpot(props: BetJackpot) {
    const { wager, winner } = props
    const { brandId, playerId, eventId } = settings.get()
    const body = { brandId, playerId, eventId, wager }
    return api.postBet(`${urls.api}${winner ? urls.betWinnerJackpot : urls.betJackpot}`, body)
}



const connectStreamReference: any = {
    client: null,
    sk: null,
}

function connectStream() {
    const { brandId, playerId, jackpotOriginalName: jackpotName } = settings.get()
    const { amount } = jackpot.get()
    let sk = SockJS(`${urls.api}${urls.wb}`)
    let client = Stomp.over(sk)
    connectStreamReference.client = client
    connectStreamReference.sk = sk
    client.connect(
        {
            player: `${brandId}-${playerId}`,
            jackpot: jackpotName
        }, () => {
            client.subscribe(`/user/${brandId}-${playerId}/wins/jackpot`, (payload: any) => {
                const winResp: winResponse = JSON.parse(payload.body)
                defineAndDisplayWin(winResp, updateAmount)
            })
            client.subscribe(`/wins/current/${jackpotName}`, (payload: any) => {
                let _res = JSON.parse(payload.body)
                if (_res.amount) {
                    if (_res.amount && !jackpot.get().userWin) {
                        updateAmount(amount, _res.amount)
                    }
                }
            });
        });
}

function hiddenOptIn() {
    widgetDOM.widgetButtonOptIn.setAttribute('hidden', 'true')
    widgetDOM.widgetButtonOptOut.removeAttribute('hidden')
    widgetDOM.widgetButtonOptIn.removeAttribute('disabled')
}
async function optin() {
    widgetDOM.widgetButtonOptIn.setAttribute('disabled', 'true')
    widgetDOM.widgetButtonOptIn.innerHTML = texts.get().loading

    const { brandId, playerId, jackpotOriginalName: jackpotName, eventId } = settings.get()
    const body = { brandId, playerId, jackpotName, optin: true }

    return api.postOpt(`${urls.api}${urls.optIn}`, body).then((res: any) => {
        hiddenOptIn()
        jackpot.update('userIn', true)
        const infoLabel = document.createElement('p')
        infoLabel.innerHTML = texts.get().userInLabel
        widgetDOM.widgetInfoLabelWrapper.innerHTML = ''
        widgetDOM.widgetInfoLabelWrapper.appendChild(infoLabel)
        widgetDOM.widgetButtonOptIn.innerHTML = texts.get().optInButton
        connectStream()
        log('action: user opted in success')
        events.callback("optin", { playerId, eventId })
    }).catch((err: any) => {
        log(`error user opt in fail: ${err}`)
    })

}
function hiddenOptOut() {
    widgetDOM.widgetButtonOptOut.setAttribute('hidden', 'true')
    widgetDOM.widgetButtonOptIn.removeAttribute('hidden')
    widgetDOM.widgetButtonOptOut.removeAttribute('disabled')
}
async function optOut() {
    widgetDOM.widgetButtonOptOut.setAttribute('disabled', 'true')
    widgetDOM.widgetButtonOptOut.innerHTML = texts.get().loading

    const { brandId, playerId, jackpotOriginalName: jackpotName, eventId } = settings.get()
    const body = { brandId, playerId, jackpotName, optin: false }

    return api.postOpt(`${urls.api}${urls.optIn}`, body).then((res: any) => {
        hiddenOptOut()
        jackpot.update('userIn', false)
        const infoLabel = document.createElement('p')
        infoLabel.innerHTML = texts.get().userOutLabel
        widgetDOM.widgetInfoLabelWrapper.innerHTML = ''
        widgetDOM.widgetInfoLabelWrapper.appendChild(infoLabel)
        widgetDOM.widgetButtonOptOut.innerHTML = texts.get().optOutButton
        log('action: user opted out success')
        events.callback("optOut", { playerId, eventId })
    }).catch((err: any) => {
        log(`error: ${err}`)
    })

}


async function setStyleFile(src: string) {
    return new Promise((resolve, reject) => {
        if (src) {
            const olderStylesheet = document.getElementById('jooba-widget-style-file');
            olderStylesheet?.parentNode?.removeChild(olderStylesheet);
            const _style = document.createElement('link');
            _style.setAttribute('rel', 'stylesheet');
            _style.setAttribute('href', src);
            _style.onload = () => resolve('')
            _style.onerror = () => resolve('')
            document.getElementsByTagName('head')[0].appendChild(_style);
            _style.setAttribute('id', 'jooba-widget-style-file');
        }
        else resolve('')
    });
}

function drag(element: any) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    element.onmousedown = dragMouseDown;
    element.ontouchstart = dragMouseDown;

    function dragMouseDown(e: any) {
        e = e || window.event;
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        document.ontouchend = closeDragElement;
        document.onmousemove = elementDrag;
        document.ontouchmove = elementDrag;
    }

    function elementDrag(e: any) {
        e = e || window.event;
        e.preventDefault();
        pos1 = pos3 - (e.clientX || e.touches[0].clientX);
        pos2 = pos4 - (e.clientY || e.touches[0].clientY);
        pos3 = e.clientX || e.touches[0].clientX;
        pos4 = e.clientY || e.touches[0].clientY;
        element.style.top = (element.offsetTop - pos2) + "px";
        element.style.left = (element.offsetLeft - pos1) + "px";
    }

    function closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
        document.ontouchend = null;
        document.ontouchmove = null;

    }
}

function destroy() {
    if (widgetDOM?.widgetWrapper) {
        widgetDOM.widgetWrapper.remove()
        settings.set('initialized', false)
        jackpot.update('amount', 0)
        try {
            connectStreamReference?.client?.disconnect()
            connectStreamReference?.sk?.end()
        } catch (error) {
            log('no websocket to destroy')
            console.error(error)
        }
    }
}

function updateWidgetInfoLabel(content: any) {
    const infoLabel = document.createElement('p')
    infoLabel.innerHTML = content || ''
    widgetDOM.widgetMediaWrapper.style.position = 'relative'
    widgetDOM.widgetMediaWrapper.style.zIndex = '99999'
    widgetDOM.widgetInfoLabelWrapper.innerHTML = ''
    widgetDOM.widgetInfoLabelWrapper.appendChild(infoLabel);
}

const updateText = texts.set
const updateAllTexts = texts.updateTexts
const updateWidgetMedia = media.set
const actions = {
    updateAmount,
    updateText,
    optin,
    log,
    optOut,
    setStyleFile,
    updateWidgetMedia,
    drag,
    displayMainWinner,
    betJackpot,
    destroy,
    updateAllTexts,
    updateWidgetInfoLabel
}
export default actions