import styles from '@/components/QuitTips/index.module.scss'
import { storage } from '@/utils';
import { InfoCircleOutlined } from '@ant-design/icons';
import { Button, Checkbox, Modal, Radio } from 'antd';
import { useState, useImperativeHandle, forwardRef } from "react";
type OperationKeyType = 'minimize' | 'quit' | 'maximize' | 'unmaximize';
const QuitTips = forwardRef((props: any, ref: any) => {
  useImperativeHandle(ref, () => ({
    changeModal: () => {
      setIsCloseModal(true)
    }
  }))
  const [isCloseModal, setIsCloseModal] = useState(false);
  const [isTips, setIsTips] = useState(false);
  const [optionsValue, setOperation] = useState<OperationKeyType>('minimize');
  return (
    <>
      <Modal
        title="关闭提示"
        open={isCloseModal}
        footer={null}
        onCancel={() => setIsCloseModal(false)}
        centered
        width={'380px'}
      >
        <div className={styles.isCloseModal}>
          <div className={styles.isCloseModalContent}>
            <InfoCircleOutlined style={{ color: 'white', fontSize: '44px' }} />
            <div style={{
              marginLeft: '10px'
            }}>
              <span style={{
                color: 'white',
                fontSize: '18px',
                display: 'block',
                marginBottom: '10px'
              }}>您点击了关闭按钮，您是想：</span>
              <Radio.Group onChange={(e) => {
                setOperation(e.target.value);
              }} value={optionsValue}>
                <Radio value={'minimize'}>最小化到系统托盘区，不退出程序。</Radio>
                <Radio value={'quit'}>退出程序。</Radio>
              </Radio.Group>
            </div>
          </div>
          <div className={styles.isCloseModalFooter}>
            <Checkbox onChange={(e) => {
              setIsTips(e.target.checked)
              storage.setItem('isTips', e.target.checked)
            }} checked={isTips}>不再提示</Checkbox>
            <div>
              <Button type="primary" className='m-ant-btn' onClick={() => {
                setIsCloseModal(false)
                if (optionsValue === 'quit') {
                  window.electron.quit()
                } else {
                  window.electron.setViewStatus(optionsValue)
                }
              }} size={'small'}>确定</Button>
              <Button size={'small'} type="primary" style={{ backgroundColor: '#31353A', marginLeft: '10px' }} onClick={() => setIsCloseModal(false)}>取消</Button>
            </div>
          </div>
        </div>
      </Modal>
    </>
  )
})

export default QuitTips