import {useState, useEffect} from 'react'
import { Button, InputCompOne } from '../../shared/index';

import {Formik, Form} from 'formik'
import * as Yup from "yup";

import { getEmployer } from '../../../core/apiRequest';
import CustomSpinner from '../../CustomSpinner';
import { FormatAmount } from '../../../lib/FormatAmount';

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

// type EmployerProps = {
//   loading?: boolean,
//   data?: Array<{[index:string]: string}> | {[index:string]: Array<{[index:string]: string}> }
// }

const initialValues = {
  job_title: "",
  name: "",
  job_sector: "",
  industry: "",
  start_date: "",
  official_email:"",
  annual_salary: "",
  net_montlty: "",
  salary_date: "",
  employee_id: "",
  highest_eductaion: "",
  employer_uid: "",
  isChecked: true
};

// To get the validation schema
const validationSchema = Yup.object().shape({
  isChecked: Yup.bool(), // use bool instead of boolean
  // .oneOf([true, false], "You must accept the terms and conditions"),
  job_title: Yup.string()
    .required("Required"),
  name: Yup.string().when('isChecked', {
      is: true, 
      then: () => Yup.string().required('required'),
      otherwise: () => Yup.string(),
    }),
  job_sector: Yup.string().when('isChecked', {
      is: true, 
      then: () => Yup.string().required('required'),
    }),
  industry: Yup.string().when('isChecked', {
      is: true, 
      then: () => Yup.string().required('required'),
    }),
  start_date: Yup.string()
    .required("Required"),
  official_email : Yup.string().when('isChecked', {
      is: true, 
      then: () => Yup.string().required('required'),
    })
    .email("Invalid"),
  annual_salary: Yup.string()
    .required("Required")
    .test("no-e", "Invalid", (value:any) => {
      if (value && /^[0-9]*$/.test(value) == false) {
        return false;
      }
      return true;
    }),
  net_montlty: Yup.string()
    .required("Required")
    .test("no-e", "Invalid", (value:any) => {
      if (value && /^[0-9]*$/.test(value) == false) {
        return false;
      }
      return true;
    }),
  salary_date: Yup.string()
    .required("Required"),
  employee_id: Yup.string()
    .required("Required"),
  highest_eductaion: Yup.string()
    .required("Required"),
  employer_uid: Yup.string().when('isChecked', {
      is: false, 
      then: () => Yup.string().required('required'),
    }),
});

export default function EmploymentDetail() {

  const [employerList, setEmployerList] = useState<any>({
    loading: true,
    data: {}
  })


  //FUNCTION TO HANDLE SUBMIT
  const handleSubmit = () => {
    console.log('good')
  };

  useEffect(()=>{
    getEmployer().then(res => {
      setEmployerList({loading:false, data:res?.data?.employer})
    }).catch(err => {
      console.log(err)
      setEmployerList({loading:false, data:{}})
    })
  },[])

  const formInitialValue = (employerList.loading || Object.keys(employerList?.data)?.length < 1) ? initialValues : {...initialValues, ...employerList?.data}

  return (
    <>
    {employerList.loading ?
        <div className='flex flex-col justify-center items-center h-96'>
            <CustomSpinner width='w-8' height='h-8' />
        </div>
        :
      <div className="w-full">
        <Formik
              initialValues={formInitialValue}
              validationSchema={validationSchema}
              onSubmit={handleSubmit}
            >
              {(props)=>(
                <Form>          
                  <div className="mt-[3.25rem] flex flex-col gap-9">
                    <p className='text-red-500 text-lg md:text-2xl'>Employment Informaton</p>
                    <div className="flex flex-col lg:flex-row items-start gap-[2rem]">
                      <div className='w-full lg:max-w-[30rem] flex flex-col'>
                        {/* <div className='w-full gap-[2rem]'>
                          <InputCompOne
                            parentClass="w-full"
                            name="employer_uid"
                            floatLabel="Employer Name"
                            // labelClass="font-bold text-[1.125rem]"
                            select={true}
                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                            selectOptions={{loading:employersList?.loading, data: employersList?.data?.records}}
                            selectValue={props.values.employer_uid}
                            onChange={props.handleChange}
                            error={(props.errors.employer_uid && props.touched.employer_uid) ? props.errors.employer_uid : ''}
                            disabled={props.values.isChecked}
                          />
                          <div className='flex gap-4 items-start my-2'>
                            <input 
                              type='checkbox' 
                              name="isChecked"
                              className='w-4 h-4 p-2 accent-purple-600 text-purple-600 bg-gray-100 border-gray-300 rounded focus:ring-purple-500' 
                              onChange={props.handleChange}
                              checked={props.values.isChecked}
                            />
                            <p className='text-[12px] text-justify'>Check here if employer is not on the list</p>
                          </div>
                          <div className={`hidden p-4 ${props.values.isChecked && 'hidden'}`}>
                            Name: {'Name'}
                          </div>
                        </div> */}
                        <div className={`w-full flex flex-col gap-[2rem] ${!props.values.isChecked && 'hidden'}`}>
                          <InputCompOne
                            parentClass="w-full"
                            name="name"
                            floatLabel="Employer name"
                            // labelClass="font-bold text-[1.125rem]"
                            input
                            disabled={true}
                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                            placeholder="Mr. Mark John"
                            value={props.values.name}
                            onChange={props.handleChange}
                            // error={(props.errors.name && props.touched.name) ? props.errors.name : ''}
                          />
                          <InputCompOne
                            parentClass="w-full"
                            name="official_email"
                            floatLabel="Employers official email"
                            // labelClass="font-bold text-[1.125rem]"
                            input
                            disabled={true}
                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                            placeholder="example@gmail.com"
                            value={props.values.official_email}
                            onChange={props.handleChange}
                            // error={(props.errors.official_email && props.touched.official_email) ? props.errors.official_email : ''}
                          />
                          <InputCompOne
                            parentClass="w-full"
                            name="industry"
                            floatLabel="Select your industry"
                            // labelClass="font-bold text-[1.125rem]"
                            select={true}
                            disabled={true}
                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                            selectOptions={props.values.industry}
                            selectValue={props.values.industry}
                            onChange={props.handleChange}
                            // error={(props.errors.industry && props.touched.industry) ? props.errors.industry : ''}
                          />
                          <InputCompOne
                            parentClass="w-full"
                            name="job_sector"
                            floatLabel="Job Sector"
                            // labelClass="font-bold text-[1.125rem]"
                            select={true}
                            disabled={true}
                            selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                            selectOptions={props.values.job_sector}
                            selectValue={props.values.job_sector}
                            onChange={props.handleChange}
                            // error={(props.errors.job_sector && props.touched.job_sector) ? props.errors.job_sector : ''}
                          />
                        </div>
                      </div>

                      <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>  
                        <InputCompOne
                          parentClass="w-full"
                          name="job_title"
                          floatLabel="Job Title"
                          // labelClass="font-bold text-[1.125rem]"
                          input
                          disabled={true}
                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                          placeholder="Software Engineer"
                          value={props.values.job_title}
                          onChange={props.handleChange}
                          // error={(props.errors.job_title && props.touched.job_title) ? props.errors.job_title : ''}
                        />
                        <InputCompOne
                          parentClass="w-full"
                          name="highest_eductaion"
                          floatLabel="Highest level of education"
                          // labelClass="font-bold text-[1.125rem]"
                          select={true}
                          disabled={true}
                          selectClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                          selectOptions={props.values.highest_eductaion}
                          selectValue={props.values.highest_eductaion}
                          onChange={props.handleChange}
                          // error={(props.errors.highest_eductaion && props.touched.highest_eductaion) ? props.errors.highest_eductaion : ''}
                        />
                        <div className="w-full flex flex-col sm:flex-row items-center gap-4">
                            <InputCompOne
                            parentClass="w-full"
                            name="start_date"
                            floatLabel="Date of resumption"
                            // labelClass="font-bold text-[1.125rem]"
                            input
                            disabled={true}
                            inputType='text'
                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                            placeholder="12/12/2015"
                            value={props.values.start_date}
                            onChange={props.handleChange}
                            // error={(props.errors.start_date && props.touched.start_date) ? props.errors.start_date : ''}
                          />
                          <InputCompOne
                            parentClass="w-full"
                            name="salary_date"
                            floatLabel="Salary payment date"
                            // labelClass="font-bold text-[1.125rem]"
                            input
                            disabled={true}
                            inputType='text'
                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                            placeholder="30th of every month"
                            value={(props.values.salary_date)}
                            onChange={props.handleChange}
                            // error={(props.errors.salary_date && props.touched.salary_date) ? props.errors.salary_date : ''}
                          />
                        </div>
                        <div className="w-full flex flex-col sm:flex-row items-center gap-4">
                          <InputCompOne
                            parentClass="w-full"
                            name="annual_salary"
                            floatLabel="Annual Income"
                            // labelClass="font-bold text-[1.125rem]"
                            input
                            disabled={true}
                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
                            placeholder="1,200,000"
                            value={FormatAmount(props.values.annual_salary)}
                            onChange={props.handleChange}
                            // error={(props.errors.annual_salary && props.touched.annual_salary) ? props.errors.annual_salary : ''}
                          />
                          <InputCompOne
                            parentClass="w-full"
                            name="net_montlty"
                            floatLabel="Net monthly salary"
                            // labelClass="font-bold text-[1.125rem]"
                            input
                            disabled={true}
                            inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem] text-right"
                            placeholder="100,000"
                            value={FormatAmount(props.values.net_montlty)}
                            onChange={props.handleChange}
                            // error={(props.errors.net_montlty && props.touched.net_montlty) ? props.errors.net_montlty : ''}
                          />
                        </div>
                        <InputCompOne
                          parentClass="w-full"
                          name="employee_id"
                          floatLabel="Employee ID"
                          // labelClass="font-bold text-[1.125rem]"
                          input
                          disabled={true}
                          inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                          placeholder="LS/001/005"
                          value={props.values.employee_id}
                          onChange={props.handleChange}
                          // error={(props.errors.employee_id && props.touched.employee_id) ? props.errors.employee_id : ''}
                        />
                        <div className="hidden w-full">
                          <Button
                            className="my-4 btn-Y text-black w-full h-11"
                            text="Next"
                            type="submit"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </Form>
              )}
        </Formik>
      </div>
    }
    </>
  );
}



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


// const jobSector: SelectOption = {
//   loading: false,
//   data: [
//     { value: "", label: "Please Select" },
//     { value: "private (non academic)", label: "Private (non academic)" },
//   ]
// }

// const industry: SelectOption = {
//   loading: false,
//   data: [
//     { value: "", label: "Please Select" },
//     { value: "engineering", label: "Engineering" },
//   ]
// }

// const highestEductaion: SelectOption = {
//   loading: false,
//   data: [
//     { value: "", label: "Please Select" },
//     { value: "b.sc + professional qualification", label: "B.Sc + Professional Qualification" },
//   ]
// }