// @ts-nocheck
import React, { useState } from 'react';
import { Form, message, Row, Col } from 'antd4';
import BaseForm from '@/components/form';
import styles from './styles.less';
import {
  Password,
  Button,
  Check,
  Phone,
  Email,
  UserName,
} from '@/components/form_items';
import SliderRadioGroup from '@/components/sliderRadioGroup';
import { loginService } from '@/service';
import Agreement from '@/components/agreement';

export default (props) => {
  const initialValues = {
    area_code: '+86',
  };

  const { isShowRegisterAccount } = props;

  const [loginType, setLoginType] = useState('email');
  const [errorInfo, setErrorInfo] = useState('');

  const handleLoginTypeChange = (e) => {
    const { value } = e?.target;
    setLoginType(value);
  };

  const handleRegisterClick = () => {
    if (props?.onRegisterClick) {
      props.onRegisterClick(loginType);
    }
  };

  const handleResetPwdClick = () => {
    if (props?.onResetPwdClick) {
      props.onResetPwdClick(loginType);
    }
  };

  const handleFinish = async (values) => {
    const params = {
      grant_type: 'password',
      login_type: 'login',
      kind: 1,
      kind: values.username.includes('@') ? 2 : 3,
      username: values.username.includes('@')
        ? values.username
        : `+86${values?.username}`,
      // : `${values?.area_code}${values?.username}`,
      password: values.password,
    };
    if (
      typeof props.onBeforeSubmit === 'function' &&
      props?.onBeforeSubmit(values)
    ) {
      const loginRes = await loginService.loginByParams(params);
      if (loginRes?.error) {
        if (props?.isShowMsg) {
          message.error(loginRes?.msg || '登录失败');
        }
        setErrorInfo();
        if (props?.onFailed) {
          props?.onFailed(loginRes);
        }
        return;
      }
      if (props?.onSuccess) {
        if (props?.isShowMsg) {
          message.success('登录成功');
        }
        props.onSuccess(loginRes);
      }
    }
  };

  return (
    <div className={styles.pwdLoginFormContainer}>
      <BaseForm initialValues={initialValues} onFinish={handleFinish}>
        {/* 自定义滑动切换方式 */}
        {/* <SliderRadioGroup
          value={loginType}
          onChange={(value) => setLoginType(value)}
        /> */}

        {/* {loginType === 'phone' ? <Phone /> : <Email name={'username'} />} */}
        <UserName name={'username'} />
        <Password placeholder={'请输入密码'} />

        <Button type="primary" htmlType="submit">
          登录
        </Button>
        <div className={styles.agreementInfoGroup}>
          {/* 是否同意Aminer授权协议 */}
          <Agreement />
        </div>
        <Row gutter={24}>
          <Col span={12}>
            <Check>保持登录状态</Check>
          </Col>
          <Col span={12} className={styles.registerAndResetPwdGroup}>
            <a onClick={handleResetPwdClick}>忘记密码？</a>
            {isShowRegisterAccount ? (
              <a onClick={handleRegisterClick}>注册</a>
            ) : null}
          </Col>
        </Row>

        {errorInfo ? <span>{errorInfo}</span> : null}
      </BaseForm>
    </div>
  );
};
