import {
  LoginForm,
  ProForm,
  ProFormCaptcha,
  ProFormText,
} from '@ant-design/pro-components';
import { Button } from 'antd';
import React from 'react';
import styles from './index.less';
import { Toast } from 'antd-mobile/es';
import { enroll, sendCaptcha } from '@/services/enroll';
import Cookies from 'js-cookie';
import { getPageQuery } from '@/utils/utils';

const Login: React.FC = () => {
  const [form] = ProForm.useForm();
  const id = getPageQuery().id || '1';

  const handleSubmit = async (values) => {
    try {
      const response = await enroll(parseInt(id), values.phone, values.captcha);
      if (response.code === 200) {
        Cookies.set('et', response.data!, { expires: 1 });
        window.location.href = '/enroll/detail';
        return;
      }
      Toast.show({
        icon: 'fail',
        content: response.message,
      });
    } catch (error) {
      Toast.show({
        icon: 'fail',
        content: '失败，请重试',
      });
    }
  };

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <div className={styles.logoWrapper}>
          <div className={styles.logo}>HIPO 高潜</div>
        </div>
        <LoginForm
          form={form}
          initialValues={{}}
          actions={[]}
          onFinish={async (values) => {
            await handleSubmit(values);
          }}
          submitter={{
            render: (props, doms) => {
              return [
                <Button
                  type="primary"
                  shape="round"
                  size={'large'}
                  className={styles.submit}
                  onClick={() => props.form?.submit?.()}
                >
                  报名
                </Button>,
              ];
            },
          }}
        >
          <>
            <ProFormText
              className={styles.formItem}
              fieldProps={{
                size: 'large',
                className: styles.input,
              }}
              name="phone"
              placeholder="手机号"
              rules={[
                {
                  required: true,
                  message: '请输入手机号！',
                },
                {
                  pattern: /^1\d{10}$/,
                  message: '手机号格式错误！',
                },
              ]}
            />
            <ProFormCaptcha
              className={styles.captchaItem}
              fieldProps={{
                size: 'large',
                className: styles.input,
              }}
              captchaProps={{
                size: 'large',
                className: styles.input,
              }}
              placeholder="请输入验证码"
              captchaTextRender={(timing, count) => {
                if (timing) {
                  return `${count} 获取验证码`;
                }
                return '获取验证码';
              }}
              name="captcha"
              rules={[
                {
                  required: true,
                  message: '请输入验证码！',
                },
                {
                  min: 4,
                },
                {
                  max: 6,
                },
              ]}
              onGetCaptcha={async () => {
                const phone = form.getFieldValue('phone');
                if (!phone) {
                  Toast.show({
                    icon: 'fail',
                    content: '请先输入手机号',
                  });
                  throw new Error('请先输入手机号');
                }
                const result = await sendCaptcha(phone);
                console.log(result);
                if (result === false) {
                  return;
                }
              }}
            />
          </>
          <div
            style={{
              marginBottom: 24,
            }}
          ></div>
        </LoginForm>
      </div>
    </div>
  );
};

export default Login;
