import React, { useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, MessagePlugin, Input, Checkbox, Button, FormInstanceFunctions, SubmitContext } from 'tdesign-react';
import { LockOnIcon, MailIcon, BrowseOffIcon, BrowseIcon, UserIcon } from 'tdesign-icons-react';
import classnames from 'classnames';
import { useAppDispatch } from 'modules/store';
import { register } from 'modules/user';
import { connectWS } from 'utils/ws';

import Style from './index.module.less';

const { FormItem } = Form;

export default function Register() {
  const [showPsw, toggleShowPsw] = useState(false);
  const formRef = useRef<FormInstanceFunctions>();
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  const onSubmit = async (e: SubmitContext) => {
    if (e.validateResult === true) {
      const formValue = (formRef.current?.getFieldsValue?.(true) || {}) as {
        email: string;
        password: string;
        nickname: string;
        checked: boolean;
      };
      if (!formValue.checked) {
        MessagePlugin.error('请同意服务协议与隐私声明');
        return;
      }
      try {
        const nickname = formValue.nickname || formValue.email.split('@')[0];
        await dispatch(register({ email: formValue.email, password: formValue.password, nickname })).unwrap();
        connectWS();
        MessagePlugin.success('注册成功，已自动登录');
        navigate('/dashboard/base');
      } catch (err: any) {
        MessagePlugin.error(err?.response?.data?.message || '注册失败，请稍后重试');
      }
    }
  };

  return (
    <div>
      <Form ref={formRef} className={classnames(Style.itemContainer, 'register-email')} labelWidth={0} onSubmit={onSubmit}>
        <FormItem name='nickname'>
          <Input size='large' placeholder='请输入昵称（选填）' prefixIcon={<UserIcon />} />
        </FormItem>
        <FormItem
          name='email'
          rules={[
            { required: true, message: '邮箱必填', type: 'error' },
            { email: true, message: '请输入正确的邮箱', type: 'warning' },
          ]}
        >
          <Input type='text' size='large' placeholder='请输入邮箱' prefixIcon={<MailIcon />} />
        </FormItem>
        <FormItem
          name='password'
          rules={[
            { required: true, message: '密码必填', type: 'error' },
            { min: 8, message: '密码至少 8 位', type: 'warning' },
          ]}
        >
          <Input
            size='large'
            type={showPsw ? 'text' : 'password'}
            clearable
            placeholder='请输入密码（至少 8 位）'
            prefixIcon={<LockOnIcon />}
            suffixIcon={
              showPsw ? (
                <BrowseIcon onClick={() => toggleShowPsw((current) => !current)} />
              ) : (
                <BrowseOffIcon onClick={() => toggleShowPsw((current) => !current)} />
              )
            }
          />
        </FormItem>
        <FormItem className={Style.checkContainer} name='checked' initialData={false}>
          <Checkbox>我已阅读并同意</Checkbox> <span className='tip'>EveryPublish 服务协议</span> 和
          <span className='tip'>隐私声明</span>
        </FormItem>
        <FormItem>
          <Button block size='large' type='submit'>
            注册
          </Button>
        </FormItem>
      </Form>
    </div>
  );
}