import { Button, InputCompOne, Stepper } from "..";
import {Formik, Form} from 'formik'
import * as Yup from "yup";

type Props = {
  handleNextStep:(value:{})=>any
}

const initialValues = {
  loan_amount: "",
  payment_month: "",
  sales_agent: "",
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  payment_month: Yup.string()
    .required("Required"),
  loan_amount: Yup.string()
    .required("Required")
    .test("no-e", "Invalid", (value:any) => {
      if (value && /^[0-9]*$/.test(value) == false) {
        return false;
      }
      return true;
    }),
    sales_agent: Yup.string()
});

export default function DashboardFormInit({handleNextStep}:Props) {

  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = (values:{}) => {
    handleNextStep(values)
  };

  return (
    <div className="w-full">
      <div className="w-full flex justify-center">
        <Stepper step={0} />
      </div>
      <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={handleSubmit}
          >
            {(props)=>(
              <Form>
                <div className="mt-[3.25rem] flex flex-col gap-9">
                  <InputCompOne
                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                    name="loan_amount"
                    label="How Much Do You Want To Apply For?"
                    labelClass="font-bold text-[1.125rem]"
                    input
                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
                    placeholder="350,000"
                    value={props.values.loan_amount}
                    onChange={props.handleChange}
                    error={(props.errors.loan_amount && props.touched.loan_amount) ? props.errors.loan_amount : ''}
                  />
                  <InputCompOne
                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                    name="payment_month"
                    label="For How Many Months?"
                    labelClass="font-bold text-[1.125rem]"
                    select={true}
                    selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                    selectOptions={paymentMonth}
                    selectValue={props.values.payment_month}
                    onChange={props.handleChange}
                    error={(props.errors.payment_month && props.touched.payment_month) ? props.errors.payment_month : ''}
                  />
                  <InputCompOne
                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                    name="sales_agent"
                    label="Direct sales agent ID ( Optional )"
                    labelClass="font-bold text-[1.125rem]"
                    floatLabel='Enter agent ID'
                    input
                    inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                    placeholder="Agent ID"
                    value={props.values.sales_agent}
                    onChange={props.handleChange}
                    error={(props.errors.sales_agent && props.touched.sales_agent) ? props.errors.sales_agent : ''}
                  />
                  <Button
                    className="my-8 max-w-[25.875rem] btn-Y text-black w-full h-11"
                    text="Next"
                    type="submit"
                  />
                </div>
              </Form>
            )}
      </Formik>
    </div>
  );
}

interface SelectOption {
  loading: boolean;
  data: {value: string;
  label: string}[]
}


const paymentMonth: SelectOption = {
  loading: false,
  data: [
    { value: "", label: "Please Select" },
    { value: "6", label: "6 Months" },
    { value: "12", label: "12 Months" },
    { value: "18", label: "18 Months" },
    { value: "24", label: "24 Months" },
  ]
}