import React from 'react';

import { Form } from 'antd';
import classNames from 'classnames';

import { useIntl } from '@/locales/localeExports';

import styles from './index.less';
import LoginContext from './LoginContext';
import LoginItem from './LoginItem';
import LoginSubmit from './LoginSubmit';

const Login = props => {
  const intl = useIntl();
  const { className } = props;
  const otherChildren = [];
  React.Children.forEach(props.children, child => {
    if (!child) {
      return;
    }
    otherChildren.push(child);
  });
  return (
    <LoginContext.Provider>
      <div className={classNames(className, styles.login)}>
        <div className={styles.desc}>
          {intl.formatMessage({ id: 'pages.login.welcome' })}
        </div>
        <Form
          form={props.from}
          onFinish={values => {
            if (props.onSubmit) {
              props.onSubmit(values);
            }
          }}
        >
          {props.children}
        </Form>
      </div>
    </LoginContext.Provider>
  );
};

Login.Submit = LoginSubmit;

Login.UserName = LoginItem.UserName;
Login.Password = LoginItem.Password;
Login.NewYearPassword = LoginItem.NewYearPassword;
Login.Mobile = LoginItem.Mobile;
Login.Captcha = LoginItem.Captcha;
Login.NewYearMobile = LoginItem.NewYearMobile;
Login.NewYearCaptcha = LoginItem.NewYearCaptcha;

export default Login;
