// @ts-nocheck
import React, { useState } from 'react';
import { Form, message, Row, Col } from 'antd4';
import BaseForm from '@/components/form';
import { FM, FormattedMessage } from '@/locales';

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',
    agreement: true,
    keep_login: true,
  };

  const { isShowRegisterAccount } = props;

  const [loginType, setLoginType] = useState('email');
  const [errorInfo, setErrorInfo] = useState('');
  const [formValidate, setFormValidate] = useState(false);
  const [loading, setLoading] = useState(false);

  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) => {
    setLoading(true);

    const params = {
      grant_type: 'password',
      login_type: 'login',
      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);
      setLoading(false);
      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}
        onFieldsChange={(_, allFields) => {
          setFormValidate(
            allFields
              .slice(0, 2)
              .every(({ touched, errors }) => touched && errors?.length === 0),
          );
        }}
      >
        {/* 自定义滑动切换方式 */}
        {/* <SliderRadioGroup
          value={loginType}
          onChange={(value) => setLoginType(value)}
        /> */}

        {/* {loginType === 'phone' ? <Phone /> : <Email name={'username'} />} */}
        <UserName name={'username'} />
        <Password
          rules={[
            {
              required: true,
              message: FormattedMessage({
                id: 'common.pwd.login.pwd.input.placement',
                defaultMessage: 'Please enter the password',
              }),
            },
          ]}
        />

        <Button type="primary" htmlType="submit" disabled={!formValidate}>
          <FM id="common.login.btn.title" defaultMessage="Login" />
        </Button>
        <div className={styles.agreementInfoGroup}>
          {/* 是否同意Aminer授权协议 */}
          <Agreement />
        </div>
        <Row gutter={24}>
          <Col span={9}>
            <Check  name={'keep_login'}>
              <FM
                id="common.keep.login.status.title"
                defaultMessage="Keep me logged in"
              />
            </Check>
          </Col>
          <Col span={15} className={styles.registerAndResetPwdGroup}>
            <a onClick={handleResetPwdClick}>
              <FM
                id="common.pwd.login.forget.pwd.title"
                defaultMessage="Forget the password?"
              />
            </a>
            {isShowRegisterAccount ? (
              <a onClick={handleRegisterClick}>
                <FM
                  id="common.sign.up.account.title"
                  defaultMessage="Register"
                />
              </a>
            ) : null}
          </Col>
        </Row>

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