import { useRef, useState } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Modal from '../../shared/modal';
import Button from '../../shared/buttons/button';
import { Field, Form, Formik } from 'formik';
import FormInput from '../../shared/forms/input';

function ResetModalStepTwo(props) {
  const [isCorrectCode, setIsCorrectCode] = useState(false);
  const formRef = useRef(null);

  return (
    <Modal
      showModal
      onClose={props.onClose}
      header={<span className='text-red-400'>بازنشانی فلش کارت‌ها</span>}
      body={
        <div className='text-base'>
          <p>برای تایید 4 رقم آخر شماره تلفن همراه خود را وارد نمایید:</p>
          <Formik
            innerRef={formRef}
            initialValues={{ code: '' }}
            validate={({ code }) => {
              const isCorrect = code === props.correctCode;
              setIsCorrectCode(isCorrect);
              if (code.length !== 4) {
                return { code: '4 رقم آخر شماره تلفن همراه خود را وارد نمایید.' };
              }
              if (!isCorrect) return { code: 'کد وارد شده اشتباه است.' };
            }}
            onSubmit={props.onNext}
          >
            <Form className='grid grid-cols-1 gap-5 p-3'>
              <Field
                required
                name='code'
                label='4 رقم آخر شماره تلفن همراه'
                component={FormInput}
                maxLength={4}
              />
            </Form>
          </Formik>
        </div>
      }
      footer={
        <div className='flex justify-end gap-1'>
          <Button
            disabled={!isCorrectCode}
            color='green'
            content='تایید'
            onClick={formRef.current?.submitForm}
          />
          <Button color='red' content='بازگشت' onClick={props.onClose} />
        </div>
      }
    />
  );
}

ResetModalStepTwo.propTypes = {
  onClose: PropTypes.func.isRequired,
  onNext: PropTypes.func.isRequired,
  correctCode: PropTypes.string.isRequired
};

function mapStateToProps({ user }) {
  return { correctCode: user.data.mobile.slice(-4) };
}

export default connect(mapStateToProps)(ResetModalStepTwo);
