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

function SMSKeyForm(props) {
  const DEFAULT_TIME_LEFT = 60;
  const [timeLeft, setTimeLeft] = useState(DEFAULT_TIME_LEFT);

  useEffect(function () {
    const timer = setTimeout(function () {
      setTimeLeft(timeLeft => (timeLeft > 0 ? timeLeft - 1 : 0));
    }, 1000);
    return function () {
      clearInterval(timer);
    };
  });

  async function submit({ smsKey }, { setErrors }) {
    try {
      await props.onSubmit(smsKey);
    } catch (error) {
      if (error.status === 403) {
        props.onError(error.data.detail || error.data);
      } else {
        setErrors({ _error: error.data.smsKey });
      }
    }
  }

  async function resend() {
    try {
      await props.onResend();
      setTimeLeft(DEFAULT_TIME_LEFT);
    } catch (error) {
      props.onError(error.data.detail || error.data);
    }
  }

  return (
    <Segment>
      {props.showTitle && <Divider content='فرم ارسال کد احراز هویت' />}

      <div className='text-large text-center'>
        <p className='my-6 mt-8'>
          <span>شماره تلفن همراه: </span>
          {props.mobile}
        </p>
        {props.back && (
          <Button
            outline
            content='تغییر شماره تلفن همراه'
            onClick={props.onBack}
            className='mx-auto my-4'
          />
        )}
      </div>

      <Divider />
      <p className='my-4 text-center'>
        یک کد 6 رقمی برای شما ارسال شد، لطفا کد ارسال شده را وارد نمایید.
      </p>

      <Formik initialValues={{ smsKey: '' }} onSubmit={submit}>
        {({ errors, dirty, isSubmitting }) => (
          <Fragment>
            {dirty && errors._error && <Alert content={errors._error} className='mt-3 mb-5' />}
            {/* form */}
            <Form>
              <Field
                required
                name='smsKey'
                label='کد احراز هویت'
                placeholder='کد ارسال شده به شماره همراه'
                component={FormInput}
                maxLength={6}
                validate={[required, smsKey]}
              />
              <Button
                color='blue'
                type='submit'
                disabled={!dirty || isSubmitting}
                content='ادامه'
                className='my-2 mr-auto'
              />
            </Form>
          </Fragment>
        )}
      </Formik>

      <Divider className='mb-4' />

      <div className='text-large text-center'>
        {timeLeft > 0 ? (
          `زمان انتظار برای ارسال مجدد: ${timeLeft} ثانیه`
        ) : (
          <Button
            outline
            color='yellow'
            disabled={timeLeft > 0}
            content='ارسال مجدد کد'
            onClick={resend}
            className='mx-auto'
          />
        )}
      </div>
    </Segment>
  );
}

SMSKeyForm.defaultProps = { showTitle: true, back: false, onBack: () => null };

SMSKeyForm.propTypes = {
  showTitle: PropTypes.bool.isRequired,
  back: PropTypes.bool.isRequired,
  mobile: PropTypes.string.isRequired,
  onSubmit: PropTypes.func.isRequired,
  onResend: PropTypes.func.isRequired,
  onBack: PropTypes.func.isRequired,
  onError: PropTypes.func.isRequired
};

export default SMSKeyForm;
