import {installApp} from '@/utils/update'
import {useConfigStore} from '@/store'
import Config from "@/config";
import {i18n} from "@/locale";

type UpdateView = {
    mask: PlusNativeObjView | null
    view: PlusNativeObjView | null
    viewHotFixInit: () => void
    viewHotFixUpdate: (progress: number) => void
    viewHotFixHide: () => void
}

type TipView = {
    mask: PlusNativeObjView | null
    view: PlusNativeObjView | null
    viewHotFixInit: (versionInfo: any, platform: any) => void
    viewHotFixHide: () => void
}

const updateView: UpdateView = {
    mask: null,
    view: null,
    viewHotFixInit() {
        if (!this.mask && plus.nativeObj.View) {
            this.mask = new plus.nativeObj.View('viewHotFixMask', {
                bottom: '0px',
                left: '0px',
                top: '0px',
                width: '100%',
                // position: 'dock'
            })
        }

        this.mask?.drawRect({
            color: 'rgba(0, 0, 0, 0.4)',
            // color: 'rgba(255, 255, 255, 0.0)'// 有颜色
        })
        this.mask?.addEventListener(
            'click',
            () => {
                console.log('--------------->view touchend')
            },
            false,
        )
        this.mask?.show()

        if (!this.view && plus.nativeObj.View) {
            this.view = new plus.nativeObj.View(
                'viewHotFixView',
                {
                    top: '45%',
                    left: '5%',
                    width: '90%',
                    height: '80px',
                    position: 'dock',
                },
                [
                    {
                        tag: 'rect',
                        id: 'processGB',
                        position: {
                            bottom: '35px',
                            left: '5%',
                            width: '90%',
                            height: '9px',
                        },
                        rectStyles: {
                            color: '#E5E5E5',
                            radius: '12px',
                        },
                    },
                    {
                        tag: 'rect',
                        id: 'processFR',
                        position: {
                            bottom: '35px',
                            left: '5%',
                            width: '0',
                            height: '9px',
                        },
                        rectStyles: {
                            color: '#2D2D2D',
                            radius: '12px',
                        },
                    },
                    {
                        tag: 'font',
                        id: 'process',
                        text: '0%',
                        position: {
                            bottom: '50px',
                            left: '0px',
                            width: '100%',
                            height: '30px',
                        },
                        textStyles: {
                            align: 'center',
                            color: '#fff',
                            size: '15px',
                        },
                    },
                ],
            )
        }
        this.view?.show()
    },
    viewHotFixUpdate(progress) {
        this.view?.drawText(
            `${progress}%`,
            {
                bottom: '50px',
                left: '0px',
                width: '100%',
                height: '30px',
            },
            {
                align: 'center',
                color: '#fff',
                size: '15px',
            },
            'process',
        )

        this.view?.drawRect(
            {
                color: '#333',
                radius: '12px',
            },
            {
                bottom: '35px',
                left: '5%',
                width: progress * 0.9 + '%',
                height: '9px',
            },
            'processFR',
        )
    },
    viewHotFixHide() {
        this.view && this.view.hide()
        this.mask && this.mask.hide()
    },
}

const tipView: TipView = {
    mask: null,
    view: null,
    viewHotFixInit(versionInfo, platform) {
        const configStore = useConfigStore()
        if (!this.mask && plus.nativeObj.View) {
            this.mask = new plus.nativeObj.View('viewHotTipFixMask', {
                bottom: '0px',
                left: '0px',
                top: '0px',
                width: '100%',
                // position: 'dock'
            })
        }

        this.mask?.drawRect({
            color: 'rgba(0, 0, 0, 0.4)',
        })
        if (this.mask?.isVisible()) {
            this.mask?.hide()
        }
        this.mask?.show()
        const screenWidth = configStore.screenWidth

        const maskWidth = screenWidth * 0.9
        console.log('maskWidth', maskWidth)
        if (!this.view && plus.nativeObj.View) {
            this.view = new plus.nativeObj.View(
                'viewHotTipView',
                {
                    top: '36%',
                    left: '5%',
                    width: maskWidth + 'px',
                    height: '200px',
                    position: 'dock',
                },

                [
                    {
                        tag: 'rect',
                        id: 'container',
                        position: {
                            bottom: '0',
                            left: '0',
                            width: '100%',
                            height: '100%',
                        },
                        rectStyles: {
                            color: '#f5f5f5',
                            radius: '14px',
                        },
                    },
                    {
                        tag: 'font',
                        id: 'icon',
                        text: versionInfo.versionNo + ' ' + versionInfo.title,
                        position: {
                            top: '16px',
                            left: '0',
                            width: '100%',
                            height: '16px',
                        },
                        textStyles: {
                            align: 'center',
                            color: '#2D2D2D',
                            size: '15px',
                            weight: 'bold',
                        },
                    },

                    {
                        tag: 'font',
                        id: 'content',
                        text: versionInfo.content,
                        position: {
                            top: '42px',
                            left: '20px',
                            width: maskWidth - 40 + 'px',
                            height: '102px',
                        },
                        textStyles: {
                            align: 'left',
                            color: '#2D2D2D',
                            size: '13px',
                            whiteSpace: 'normal',
                            // @ts-ignore
                            overflow: 'ellipsis',
                        },
                    },

                    {
                        tag: 'rect',
                        id: 'btnLeft',
                        position: {
                            bottom: '15px',
                            left: '36px',
                            width: '84px',
                            height: '25px',
                        },
                        rectStyles: {
                            color: '#E5E5E5',
                            radius: '14px',
                        },
                    },
                    {
                        tag: 'font',
                        id: 'btnLeftText',
                        text: i18n.global.t('common.cancel'),
                        position: {
                            bottom: '15px',
                            left: '36px',
                            width: '84px',
                            height: '25px',
                        },
                        textStyles: {
                            align: 'center',
                            color: '#2D2D2D',
                            size: '14px',
                        },
                    },
                    {
                        tag: 'rect',
                        id: 'btnRight',
                        position: {
                            bottom: '15px',
                            left: maskWidth - 120 + 'px',
                            width: '84px',
                            height: '25px',
                        },
                        rectStyles: {
                            color: '#333',
                            radius: '14px',
                        },
                    },
                    {
                        tag: 'font',
                        id: 'btnRightText',
                        text: i18n.global.t('common.confirm'),
                        position: {
                            bottom: '15px',
                            left: maskWidth - 120 + 'px',
                            width: '84px',
                            height: '25px',
                        },
                        textStyles: {
                            align: 'center',
                            color: '#fff',
                            size: '14px',
                        },
                    },
                ],
            )
        }
        if (this.view?.isVisible()) {
            this.view?.hide()
        }
        this.view?.show()

        this.view?.setTouchEventRect([
            {
                top: '155px',
                left: '36px',
                width: '84px',
                height: '25px',
            },
            {
                top: '155px',
                left: maskWidth - 120 + 'px',
                width: '84px',
                height: '25px',
            },
        ])

        this.view?.addEventListener('click', (event) => {
            console.log('=>(updateView.js:326) cancelBtn', event)
            const {screenY, clientY, clientX} = event
            if (screenY - clientX - clientY > 50) {
                this.viewHotFixHide()
            }
        })

        this.view?.addEventListener('click', (event) => {
            console.log('=>(updateView.js:326) confirmBtn', event)
            const {screenY, clientY, clientX} = event
            if (screenY - clientX - clientY < 120) {
                this.viewHotFixHide()
                installApp(versionInfo.url)
                // if (platform === 'Android') {
                // } else {
                //     plus.runtime.launchApplication(
                //         {
                //             action: `itms-apps://itunes.apple.com/cn/app/id${Config.iosId}?mt=8`,
                //         },
                //         function (e) {
                //             console.log('e', e)
                //         },
                //     )
                // }
            }
        })
    },
    viewHotFixHide() {
        this.view && this.view.hide()
        this.mask && this.mask.hide()
    },
}

export {updateView, tipView}
