import styles from '@/page/Login/index.module.scss'
import { useEffect, useState } from "react";
import { useNavigate } from 'react-router-dom';
import { Input, Button, Checkbox, message, Modal } from "antd"
import { storage } from '@/utils'
import { GetCheckUser, PostAnonLogin, PostLogin } from '@/api/Login'
import * as CryptoJS from 'crypto-js';
import ImageUrl from '@/utils/package/imageUrl'
import { v4 as uuidv4 } from 'uuid';
import { GetCheckoutRoomNum, GetRoomInfo, GetRoomRtcToken } from '@/api/Home/Index';
const Login: React.FC = () => {
  const navigate = useNavigate();
  const [accountPasswordStatus, setAccountPasswordStatus] = useState<boolean>(false);
  const [version, setVersion] = useState<string>('')
  const [operation, setOperation] = useState<{
    isRememberPassword: boolean;
    isAutoLogin: boolean;
    account: string;
    password: string;
    options: { label: string; value: string }[];
    optionsValue: string[];
  }>({
    isRememberPassword: false,
    isAutoLogin: false,
    account: '',
    password: '',
    options: [
      { label: '记住密码', value: 'isRememberPassword' },
      { label: '自动登录', value: 'isAutoLogin' },
    ],
    optionsValue: []
  });
  const [anonInfo, setAnonInfo] = useState({
    deviceId: '',
    nickName: '',
    roomNum: '',
  })
  const [nameModal, setNameModal] = useState(false)

  useEffect(() => {
    window.electron.setMainWindowSize({
      width: 752,
      height: 520,
      key: 'login'
    })
    if (storage.getItem('login')) {
      const login = JSON.parse(storage.getItem('login') as string);
      const data = {
        isRememberPassword: login.isRememberPassword,
        isAutoLogin: login.isAutoLogin,
        optionsValue: login.optionsValue,
      }
      if (login.isRememberPassword) {
        setOperation({
          ...operation,
          ...data,
          account: login.account,
          password: login.password,
        })
      } else {
        setOperation({
          ...operation,
          ...data,
        })
      }
    }
    window.electron.getVersion().then(res => {
      setVersion(res)
    })
  }, []);

  // 退出
  const quitClick = (): void => {
    window.electron.setViewStatus('quit')
  }

  // 重置
  const resetClick = (): void => {
    setOperation({
      ...operation,
      account: '',
      password: '',
    })
    setAccountPasswordStatus(false)
  }
  // 继续
  const continueClick = (): any => {
    if (!operation.account) {
      return message.error('请输入账号！')
    }
    if (storage.getItem('login')) {
      const login = JSON.parse(storage.getItem('login') as string);
      if (login.account !== operation.account) {
        setOperation({
          ...operation,
          password: '',
        })
      }
    }
    GetCheckUser(operation.account).then(res => {
      if (res.code === 200) {
        res.data ? setAccountPasswordStatus(true) : message.error('账号不存在!')
      }
    })
  }

  // 设置勾选
  const changeOptionsValue = (checkedValues: string[]): void => {
    if (checkedValues.indexOf('isAutoLogin') >= 0 && checkedValues.indexOf('isRememberPassword') === -1) {
      checkedValues.push('isRememberPassword')
    }
    setOperation({
      ...operation,
      optionsValue: checkedValues,
    })
    storage.setItem('login', JSON.stringify({
      isRememberPassword: checkedValues.includes('isRememberPassword'),
      isAutoLogin: checkedValues.includes('isAutoLogin'),
      account: operation.account,
      password: operation.password,
      optionsValue: checkedValues,
    }))
  };
  const getRoomRtcToken = async (roomNum: string, callBack: Function): Promise<void> => {
    Promise.all([GetRoomRtcToken(roomNum), GetRoomRtcToken(roomNum + 'a')]).then(res => {
      if (res[0].code === 200 && res[1].code === 200) {
        callBack({
          token: res[0].data,
          tokenA: res[1].data,
        })
      } else {
        storage.setItem('loading', false)
      }
    }).catch(() => {
      storage.setItem('loading', false)
    })
  }
  // 登录
  const loginClick = (): void => {
    if (operation.password === '') {
      message.error('请输入密码');
      return;
    }
    PostLogin({
      account: operation.account,
      pwd: CryptoJS.MD5(operation.password).toString(CryptoJS.enc.Hex)
    }).then(res => {
      if (res.code === 200) {
        message.success('登录成功!')
        storage.setItem('login', JSON.stringify({
          isRememberPassword: operation.optionsValue.includes('isRememberPassword'),
          isAutoLogin: operation.optionsValue.includes('isAutoLogin'),
          account: operation.account,
          password: operation.password,
          optionsValue: operation.optionsValue,
        }))
        storage.setItem('user', JSON.stringify(res.data))
        storage.setItem('userLogin', true)
        window.electron.getWindowSize().then((res: any) => {
          window.electron.setMainWindowSize({
            width: Math.ceil(res.width / 1.5),
            height: Math.ceil(res.height / 1.3),
          })
        })
        window.electron.startSignalr(res.data)
        navigate('/home')
      }
    })
  }

  return (
    <>
      <div className={styles.login}>
        <div className={styles.loginBg}>
          <img src={import.meta.env.VITE_ENV === 'xy' ? ImageUrl.icon53 : ImageUrl.icon1} alt="" />
        </div>
        <div className={styles.loginContent}>
          <div>
            <div className={styles.quit}>
              <img src={ImageUrl.icon2} alt="" title='退出' className='drag' onClick={quitClick} />
            </div>
            <div className={styles.logo}>
              <img src={ImageUrl.icon4} alt="" />
            </div>
          </div>
          <div>
            <div>
              <Input
                value={operation.account}
                onChange={e => {
                  setOperation({
                    ...operation,
                    account: e.target.value
                  })
                }}
                disabled={accountPasswordStatus}
                className={`${styles.loginInputIcon} drag`}
                style={{ marginBottom: '12px' }}
                placeholder="请输入账号"
                prefix={<img src={ImageUrl.icon5} alt="" />}
                suffix={
                  (accountPasswordStatus && operation.account ? <span
                    style={{ color: '#47D3D0', cursor: 'pointer' }}
                    onClick={resetClick}
                  >重置
                  </span> : null)
                }
              />

              {!accountPasswordStatus ? <div style={{ marginTop: '36px' }} className={`drag`}>
                <Button type="primary"
                  onClick={continueClick}
                  style={{ width: '100%' }}
                  className={`${styles.loginButton} m-ant-btn`}
                >继续</Button>
              </div> : null}
              {accountPasswordStatus ? <div className={`animate__animated animate__fadeIn`}>
                <Input.Password
                  value={operation.password}
                  onChange={e => {
                    setOperation({
                      ...operation,
                      password: e.target.value
                    })
                  }}
                  className={`${styles.loginInputIcon} drag`}
                  style={{ marginBottom: '36px' }}
                  placeholder="请输入密码"
                  prefix={<img src={ImageUrl.icon6} alt="" />}
                />
                <Button type="primary" className={`${styles.loginButton} drag m-ant-btn`} onClick={loginClick} style={{ width: '100%' }}>登录</Button>
                <div className={`${styles.operation} drag`}>
                  <Checkbox.Group
                    options={operation.options}
                    value={operation.optionsValue}
                    onChange={changeOptionsValue}
                  />
                </div>
              </div> : null}
            </div>
          </div>
          <div>
            <div></div>
            <span>游客登录</span>
            <div></div>
          </div>
          <div className={`drag`}>
            <div>
              <Input
                placeholder="输入会议号"
                style={{ height: '44px' }}
                value={anonInfo.roomNum}
                onChange={e => {
                  setAnonInfo({
                    ...anonInfo,
                    roomNum: e.target.value
                  })
                }} />
            </div>
            <div
              onClick={() => {
                if (!anonInfo.roomNum) {
                  return message.error('请输入房间号!')
                }
                GetCheckoutRoomNum(anonInfo.roomNum).then(res => {
                  if (res.code === 200) {
                    if (res.data) {
                      window.electron.getRegistry().then(async (res: any) => {
                        const uuid = uuidv4();
                        if (!res) {
                          window.electron.setRegistry(uuid)
                        }
                        setAnonInfo({
                          ...anonInfo,
                          deviceId: res ? res.value : uuid,
                          nickName: storage.getItem('nickName') || ''
                        })
                        storage.getItem('nickName')
                        setNameModal(true)
                      })
                    } else {
                      message.error('房间号不存在!')
                    }
                  }
                })
              }}
            ><img src={ImageUrl.icon3} alt="" /></div>
          </div>
          <div>
            版本号：{version}
          </div>
        </div>
      </div>
      <Modal title="参会昵称" open={nameModal} footer={null} closable={false} centered width={'300px'}>
        <div>
          <div>
            <Input
              placeholder="请输入参会昵称"
              value={anonInfo.nickName}
              onChange={(e) => {
                setAnonInfo({
                  ...anonInfo,
                  nickName: e.target.value
                })
                storage.setItem('nickName', e.target.value)
              }}
            />
          </div>
          <div style={{
            display: 'flex', justifyContent: 'center', marginTop: '10px'
          }}>
            <Button type="primary" style={{ backgroundColor: '#31353A', marginRight: '14px' }} onClick={() => setNameModal(false)}>取消</Button>
            <Button type="primary" className='m-ant-btn' onClick={() => {
              if (!anonInfo.nickName) {
                return message.error('请输入参会昵称！')
              }
              storage.setItem('loading', true)
              PostAnonLogin(anonInfo).then(async (res) => {
                if (res.code == 200) {
                  storage.setItem('user', JSON.stringify(res.data))
                  storage.setItem('userLogin', true)
                  await window.electron.startSignalr(res.data)
                  getRoomRtcToken(anonInfo.roomNum, (options: any) => {
                    if (options) {
                      GetRoomInfo(anonInfo.roomNum).then(async (res) => {
                        if (res.code === 200) {
                          setTimeout(() => {
                            storage.setItem('loading', false)
                            window.electron.getWindowSize().then((res: any) => {
                              window.electron.setMainWindowSize({
                                width: Math.ceil(res.width / 1.5),
                                height: Math.ceil(res.height / 1.3),
                              })
                            })
                            navigate(`/meeting`, {
                              state: {
                                channelId: anonInfo.roomNum,
                                token: options.token,
                                tokenA: options.tokenA,
                                roomId: res.data.id,
                                roomName: res.data.roomName,
                                enableMicr: false,
                                enableCamera: false,
                              }
                            })
                          }, 2000)
                        } else {
                          storage.setItem('loading', false)
                        }
                      }).catch(() => {
                        storage.setItem('loading', false)
                      })
                    }
                  })
                }
              }).catch(() => {
                storage.setItem('loading', false)
              })
            }}>进入</Button>
          </div>
        </div>
      </Modal>
    </>
  )
}

export default Login