import styles from '@/components/UpdateModal/index.module.scss'
import ImageUrl from '@/utils/package/imageUrl';
import { getUpdateUrl } from '@/utils/package/public';
import { Button, Flex, Modal, Progress } from 'antd';
import { forwardRef, useImperativeHandle, useState, memo, useEffect } from "react";

const UpdateModal = forwardRef((props: any, ref: any) => {
    useImperativeHandle(ref, () => ({
        changeModal: (data: any) => {
            try {
                let dataJson = JSON.parse(data)
                if (dataJson.type === '0') { // 打开弹窗
                    setProgress(res => {
                        if (res) {

                        } else {
                            window.electron.onDownload('1')
                        }
                        return res
                    })
                } else if (dataJson.type === '1') { // 下载中 返回进度值
                    if (dataJson.value === 100 && location.hash.indexOf('/meeting') === -1) {
                        setIsUpdateModal(true)
                        getContent()
                    }
                    setProgress(dataJson.value.toFixed(2))
                } else if (dataJson.type === '2') { // 下载完成
                    setProgress(100)
                    if (location.hash.indexOf('/meeting') === -1) {
                        setIsUpdateModal(true)
                        getContent()
                    }
                } else if (dataJson.type === '3') {
                    if (location.hash.indexOf('/meeting') === -1) {
                        setIsUpdateModal(true)
                        getContent()
                    }
                }
            } catch (error) {

            }
        }
    }))
    const [isUpdateModal, setIsUpdateModal] = useState(false);
    const [progress, setProgress] = useState(0); // 下载进度值
    const [updateContent, setUpdateContent] = useState('') // 版本更新内容
    const [env, setEnv] = useState('')
    useEffect(() => {
        window.electron.getEnv().then(res => {
            setEnv(res)
        })
    }, [])
    function getContent() {
        window.electron.getEnv().then(res => {
            fetch(`${getUpdateUrl(res)}/update.txt?t=${+new Date()}`) // 配置服务器地址
                .then(async response => {
                    if (response.status === 200) {
                        return setUpdateContent(await response.text())
                    }
                    throw new Error('Network response was not ok.');
                })
                .then(textContent => {
                })
                .catch(error => {
                });
        })
    }

    function closeModal() {
        // if (progress != 100) {
        //     window.electron.onDownload('0') // 取消下载
        // }
        setIsUpdateModal(false)
    }

    return (
        <>
            <Modal
                title=""
                open={isUpdateModal}
                footer={null}
                onCancel={() => closeModal()}
                centered
                width={'400px'}
                className='modal-padding'
                maskClosable={false}
                closeIcon={progress === 100 ? false : true}
            >
                <div className={styles.isUpdateModal} style={{ backgroundImage: `url(${ImageUrl.icon7})` }}>
                    <div className={styles.remarks} dangerouslySetInnerHTML={{ __html: updateContent }}>
                    </div>
                    {
                        !progress ?
                            <div className={styles.buttons}>
                                <Button type="primary"
                                    onClick={() => window.electron.onDownload('1')}
                                    style={{ width: '100%', height: '40px', marginBottom: '10px' }}
                                    className={`m-ant-btn`}
                                >立即更新</Button>
                                {env === "development" ? <div className={styles.button2} onClick={() => setIsUpdateModal(false)}>暂不更新</div> : null}
                            </div> : progress < 100 ?
                                <div style={{ margin: '20px 0' }}>
                                    下载进度：{progress}%
                                    <Flex gap="small" vertical>
                                        <Progress percent={progress} showInfo={false} />
                                    </Flex>
                                </div> :
                                <Button type="primary"
                                    onClick={() => window.electron.onDownload('2')}
                                    style={{ width: '100%', height: '40px', margin: '20px 0' }}
                                    className={`m-ant-btn`}
                                >下载完成，点击安装</Button>
                    }
                </div>
            </Modal>
        </>
    )
})

export default memo(UpdateModal)