import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
import {Formik, Form} from 'formik'
import * as Yup from "yup";

import { RouteHandler } from "../../router/routes";

import { Button, InputCompOne } from "..";

// To get the validation schema
const validationSchema = Yup.object().shape({
  firstname: Yup.string()
    .required("Required"),
  lastname: Yup.string()
    .required("Required"),
  internal_email : Yup.string().required("Required").email("Invalid"),
});

export default function DashboardProfile() {
    let navigate = useNavigate();
  const navigateToHome = () => navigate(RouteHandler.dashboardHome);


  const { userDetails } = useSelector((state:any) => state?.userDetails); // GETS USER DETAILS

  const initialValues = {
    firstname: userDetails.firstname,
    lastname: userDetails.lastname,
    internal_email: userDetails.internal_email
  };

   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values:any) => {
    console.log('good', values)
  };
  
  return (
    <div className="w-full">

      <div className='my-[2rem] flex items-center'>
        <button onClick={navigateToHome} className='py-2 px-4 text-lg text-white flex justify-center items-center bg-[#5C2684]'>&lt; Back</button>
      </div>

      <Formik
              initialValues={initialValues}
              validationSchema={validationSchema}
              onSubmit={handleSubmit}
            >
              {(props)=>(
                <Form>
                  <div className="flex flex-col lg:flex-row items-start gap-[2rem]">
                    <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>
                      <InputCompOne
                        parentClass="w-full"
                        name="firstname"
                        floatLabel="Firstname"
                        // labelClass="font-bold text-[1.125rem]"
                        input
                        inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
                        placeholder="Mr. Mark John"
                        value={props.values.firstname}
                        onChange={props.handleChange}
                        // error={(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : ''}
                      />
                      <InputCompOne
                        parentClass="w-full"
                        name="internal_email"
                        floatLabel="Email"
                        // 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.internal_email}
                        onChange={props.handleChange}
                        // error={(props.errors.internal_email && props.touched.internal_email) ? props.errors.internal_email : ''}
                      />
                    </div>

                    <div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>
                      <InputCompOne
                        parentClass="w-full"
                        name="lastname"
                        floatLabel="Lastname"
                        // 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.lastname}
                        onChange={props.handleChange}
                        // error={(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : ''}
                      />
                    </div>
                  </div>

                  <div className='hidden w-full lg:max-w-[416px] flex flex-col gap-[2rem]'>
                    <div className="w-full">
                      <Button
                        className="my-4 btn-Y text-black w-full h-11"
                        text="Update"
                        type="submit"
                      />
                    </div>
                  </div>
                </Form>
              )}
        </Formik>
    </div>
  );
}
