import { Grid, TextField, Button } from '@material-ui/core';
import { observer } from 'mobx-react-lite'

import { RoutePath } from 'consts/RoutePath'
import { useFormik } from 'hooks/useFormik'
import { useStore } from 'hooks/useStore'
import { Form } from 'components/login/Form'

const CredentialsForm = ({ ...props }) => {
  const { login } = useStore()
  const { submitCredentials, pending } = login

  const formik = useFormik({
    name: 'loginCredentials',

    initialValues: {
      username: null,
      password: null
    },

    onSubmit(values) {
      const { username, password } = values
      submitCredentials(username, password)
    }
  })

  return (
    <Form
      {...props}
      {...formik.bindForm()}
      heading="Войти"
      subheading="Введите логин и пароль:"
      secondaryAction={(
        <Button
          href={RoutePath.LOGIN_RECOVERY}
          disabled={pending}
        >
          Забыли пароль?
        </Button>
      )}
      primaryAction={(
        <Button
          {...formik.bindSubmitButton()}
          disabled={pending}
          loading={pending}
        >
          Войти
        </Button>
      )}
    >
      <Grid item xs={12}>
        <TextField
          {...formik.bindInput('username')}
          label="Имя пользователя"
          autoComplete="username"
          disabled={pending}
        />
      </Grid>
      <Grid item xs={12}>
        <TextField
          {...formik.bindInput('password')}
          type="password"
          label="Пароль"
          autoComplete="current-password"
          disabled={pending}
        />
      </Grid>
    </Form>
  )
}

const components = observer(CredentialsForm)
export { components as CredentialsForm }