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

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

const initialValues = {
  amount: "",
  duration: "",
  id: "",
};

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

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

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

  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="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.amount}
                    onChange={props.handleChange}
                    error={(props.errors.amount && props.touched.amount) ? props.errors.amount : ''}
                  />
                  <InputCompOne
                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                    name="duration"
                    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={duration}
                    selectValue={props.values.duration}
                    onChange={props.handleChange}
                    error={(props.errors.duration && props.touched.duration) ? props.errors.duration : ''}
                  />
                  <InputCompOne
                    parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
                    name="id"
                    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.id}
                    onChange={props.handleChange}
                    error={(props.errors.id && props.touched.id) ? props.errors.id : ''}
                  />
                  <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 duration: 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" },
  ]
}