import { useState } from "react";
import InputCom from "../../Helpers/Inputs/InputCom";
import LoadingSpinner from "../../Spinners/LoadingSpinner";
import usersService from "../../../services/UsersService";
import { useNavigate } from "react-router-dom";

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


export default function FamilyProfile({familyData, className }) {

  const validationSchema = Yup.object().shape({
    firstname: Yup.string()
      .required("Firstname is required"),
    lastname: Yup.string()
      // .min(3, "Minimum 3 characters")
      // .max(25, "Maximum 25 characters")
      .required("Lastname is required"),
    year: Yup.number()
      .required("Year is required")
      .min(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MAXIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`)
      .max(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MINIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`),
    month: Yup.number()
      .required("Month is required")
      .min(1, "Month is required"),
  });

  const navigate = useNavigate()
  const api = new usersService()

  let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''})

  // let [updateDetails, setUpdateDetails] = useState({
  //   family_uid: familyData.uid,
  //   firstname: familyData.firstname,
  //   lastname: familyData.lastname,
  //   year: familyData.year,
  //   month: familyData.month,
  //   action: 22020
  // })

  // initial values for formik
  let initialValues = {
    family_uid: familyData.uid,
    firstname: familyData.firstname,
    lastname: familyData.lastname,
    year: familyData.year,
    month: familyData.month,
    action: 22020
  };
  
  const handleChange = ({target:{name, value}})=>{
    setUpdateDetails(prev => ({...prev, [name]:value}))
  }

  const updateFamily = (values, helpers) => {
    setRequestStatus({loading:true, status:false, message: ''})
    // let {firstname, lastname, year, month} = updateDetails
    // if(!firstname || !lastname || year == 0 || month == 0) {
    //   setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
    //   return setTimeout(()=>{
    //     setRequestStatus({loading:false, status:false, message: ''})
    //   }, 5000)
    // }
    api.getFamilyUpdate(values).then(res=>{
      if(res.data.internal_return < 0){
        return setRequestStatus({loading:false, status:false, message: 'Failed, try again!'})
      }
      setRequestStatus({loading:false, status:true, message: 'Family account updated'})
      setTimeout(()=>{
        navigate('/acc-family', {replace:true})
      }, 5000)
    }).catch(error => {
      setRequestStatus({loading:false, status:false, message: 'Unable to update, try again!'})
    }).finally(()=>{
      setTimeout(()=>{
        setRequestStatus({loading:false, status:false, message: ''})
      }, 5000)
    })
  }

  return (
    <div
      className={`w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
        className || ""
      }`}
    >
      <Formik
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={updateFamily}
      >
        {(props) => {
          return (
          <Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
            <InputCom
              placeholder="Firstname"
              label="First Name:"
              name="firstname"
              type="text"
              parentClass="flex items-center gap-1 w-full"
              labelClass="flex-[0.2] mb-0"
              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.firstname && props.touched.firstname ? 'border border-red-500' : ''}`}
              fieldClass="px-2"
              value={props.values.firstname}
              inputHandler={props.handleChange}
            />
            <InputCom
              placeholder="Lastname"
              label="Last Name:"
              name="lastname"
              type="text"
              parentClass="flex items-center gap-1 w-full"
              labelClass="flex-[0.2] mb-0"
              inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.lastname && props.touched.lastname ? 'border border-red-500' : ''}`}
              fieldClass="px-2"
              value={props.values?.lastname}
              inputHandler={props.handleChange}
            />
            <div className="input-com mb-7 flex flex-col gap-1 w-full">
              {/* Age dropdown */}
              <div className="">
                <label
                  className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
                  htmlFor="age-selection"
                >
                  Birthday: (Year/Month)
                </label>
                {((props.errors.year && props.touched.year) || (props.errors.month && props.touched.month)) && (
                  <span className="text-[12px] text-red-500">
                    {' '}{props.errors.year || props.errors.month}
                  </span>
                )}
              </div>
              <div className="flex max-w-[330px] w-full self-end gap-4">
                <select
                  name='year'
                  id="yearDropdown"
                  value={props.values.year}
                  onChange={props.handleChange}
                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.year && props.touched.year ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
                >
                  <option value="">Select a Year</option>
                  {years.map((year) => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
                </select>

                <select
                  name='month'
                  id="monthDropdown"
                  // value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
                  value={(months.filter(month => month.id == props.values.month)[0]?.id) || 0}
                  onChange={props.handleChange}
                  className={`input-wrapper border border-[#f5f8fa] ${props.errors.month && props.touched.month ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
                >
                  <option value="">Select a Month</option>
                  {months.map(({id, name}) => (
                    <option key={id} value={id}>
                      {name}
                    </option>
                  ))}
                </select>
              </div>
            </div>
            {requestStatus.message && (
              <div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
                {requestStatus.message}
              </div>
            )}
            <div className="flex justify-end w-full">
              {requestStatus.loading ?
                <>
                <div className="signup btn-loader"></div>
                <LoadingSpinner size='4' />
                </>
                :
                <button
                type="submit"
                // onClick={updateFamily}
                // className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
                className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
                >
                Update
                </button>
              }
            </div>
          </Form>
          );
        }}
      </Formik>
    </div>
  );
}

  // Get the current year
  // const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
  const currentYear = new Date().getFullYear();

  // Generate an array of years from the current year to (currentYear - 19)
  const years = Array.from({ length: 19 }, (_, index) => currentYear - index);

  const months = [
    {id:'1', name:"January"},
    {id:'2', name:"February"},
    {id:'3', name:"March"},
    {id:'4', name:"April"},
    {id:'5', name:"May"},
    {id:'6', name:"June"},
    {id:'7', name:"July"},
    {id:'8', name:"August"},
    {id:'9', name:"September"},
    {id:'10', name:"October"},
    {id:'11', name:"November"},
    {id:'12', name:"December"},
  ];