import { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Field, Form, Formik } from 'formik';
import Segment from '../shared/segment';
import Divider from '../shared/divider';
import Alert from '../shared/alert';
import Button from '../shared/buttons/button';
import FormInput from '../shared/forms/input';
import { mobile, required } from '../shared/forms/validations';

function MobileForm(props) {
  async function submit({ mobile }, { setErrors }) {
    try {
      await props.onSubmit(mobile);
    } catch (error) {
      setErrors({ _error: error.data.detail || error.data });
    }
  }

  return (
    <Segment>
      <Divider horizontal content='فرم فراموشی رمز عبور' />
      <Formik initialValues={{ mobile: '' }} onSubmit={submit}>
        {({ errors, dirty, isSubmitting }) => (
          <Fragment>
            {dirty && errors._error && <Alert content={errors._error} className='mt-3 mb-5' />}
            <Form>
              <Field
                required
                name='mobile'
                label='شماره تلفن همراه'
                type='tel'
                placeholder='09121234567'
                component={FormInput}
                validate={[required, mobile]}
              />
              <div className='text-medium my-4'>
                شماره تلفن همراه وارد شده هنگام ثبت نام را وارد کنید.
              </div>
              <Button
                type='submit'
                disabled={!dirty || isSubmitting}
                content='ادامه'
                className='my-2 mr-auto'
              />
            </Form>
          </Fragment>
        )}
      </Formik>
    </Segment>
  );
}

MobileForm.propTypes = {
  onSubmit: PropTypes.func.isRequired
};

export default MobileForm;