import styles from './index.less';
import { Button, Checkbox, Form, Input, Modal, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import logoSvg from '../../assets/logo.svg';
import { useEffect, useRef, useState } from 'react';
import { loginChatGLM } from '@/services/chatGLM/api';
import { useModel } from 'umi';
import moment from 'moment';
interface ILoginModalProps {
  open: boolean;
  setOpen: (value: boolean) => void;
}

const LoginModal = (props: ILoginModalProps) => {
  const { open, setOpen } = props;

  const [loading, setLoading] = useState(false);
  const { initialState, setInitialState } = useModel('@@initialState');
  const [form] = Form.useForm();
  const submitRef = useRef<HTMLButtonElement>(null);

  const reset = () => {
    form.resetFields();
    setOpen(false);
  };

  useEffect(() => {
    if (open) {
      const account = localStorage.getItem('account');
      localStorage.removeItem('account');
      if (account) {
        setTimeout(() => {
          submitRef.current?.click();
        }, 300);
      }
    }
  }, [open]);

  const handleSubmit = async (values: any) => {
    setLoading(true);
    const { username, password, checked } = values;
    try {
      const result = await loginChatGLM({
        name: username,
        password,
      });
      if (checked) {
        localStorage.setItem('account', JSON.stringify({ username, password, checked }));
      }
      localStorage.setItem('expires', moment().add(11, 'hour').unix().toString());
      setInitialState({ ...initialState, userInfo: result });
      localStorage.setItem('user', JSON.stringify(result));
      setLoading(false);
      reset();
    } catch (error) {
      message.error('账号或者密码错误');
      setLoading(false);
    }
  };

  function getAccount() {
    const account = localStorage.getItem('account');
    return JSON.parse(account || JSON.stringify({ username: '', password: '', checked: false }));
  }

  return (
    <Modal
      open={open}
      footer={null}
      closable={false}
      width={480}
      wrapClassName={styles.modal}
      bodyStyle={{
        padding: '56px',
        height: '496px',
      }}
      centered
      maskClosable={true}
    >
      <div className={styles.modal_login}>
        <div className={styles.modal_title}>
          <img src={logoSvg} alt="" />
          <p>欢迎来到 ZENSONG.AI</p>
        </div>
        <p className={styles.modal_tip}>账户密码登录</p>
        <Form
          initialValues={getAccount()}
          name="normal_login"
          onFinish={handleSubmit}
          className={styles.modal_form}
        >
          <Form.Item name="username" rules={[{ required: true, message: '请输入你的账户!' }]}>
            <Input prefix={<UserOutlined />} placeholder="账户" value={''} />
          </Form.Item>
          <Form.Item name="password" rules={[{ required: true, message: '请输入你的密码!' }]}>
            <Input.Password prefix={<LockOutlined />} placeholder="密码" value={''} />
          </Form.Item>
          <Form.Item name="checked" valuePropName="checked" className={styles.modal_checked}>
            <Checkbox>自动登录</Checkbox>
          </Form.Item>
          <Form.Item>
            <Button
              ref={submitRef}
              type="primary"
              htmlType="submit"
              className={styles.modal_button}
              loading={loading}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </Modal>
  );
};

export default LoginModal;
