import { Form, FormProps, Input, notification } from 'antd'
import '../../styles/login.scss'
import Button from '../../components/Button'
import { useRouter } from '../../hooks/useRouter'
import store from '../../store'
import { useEffect, useState } from 'react'
import { http_code, http_login, http_submit } from '../../http/api'
import { useTranslation } from 'react-i18next'
import LanguageMenu from '../../components/LanguageMenu'
type FieldType = {
  account: string;
  password: string;
};

const Submit = () => {

  const [form] = Form.useForm()
  const { t } = useTranslation()

  const onFinish: FormProps<FieldType>['onFinish'] = async (values) => {
    const res: any = await http_submit({
      ...values
    })
    if (res.code === 0) {
      notification.success({
        message: t('Submit success')
      })
      form.resetFields()
    }
  };


  useEffect(() => {
  }, [])

  return (
    <div className='login' style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', top: 20, right: 20 }}>
        <LanguageMenu width={40} />
      </div>
      <div className='container'>

        <div className='row-center'>
          <img src={require('../../assets/gmi.jpg')} className='img' alt="" />
        </div>
        <div className='row-center'>
          <div style={{ maxWidth: 500, width: '100%', padding: '0 20px' }}>
            <Form
              onFinish={onFinish}
              form={form}
            >
              <Form.Item
                name="account"
                rules={[
                  {
                    required: true,
                    message: t('Please enter a account'),
                  },
                ]}
              >
                <Input className='input' placeholder={t('Account')} ></Input>
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: t('Please enter a password'),
                  },
                ]}
              >
                <Input.Password className='input' placeholder={t('Please enter a password')} />
              </Form.Item>
              <Form.Item>
                <Button htmlType="submit">{t('Submit')}</Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    </div>
  )
}

export default Submit