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

import { Form, Formik } 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,
    enable_traking: familyData?.enable_traking,
  };

  // 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 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>

              <div className="input-com mb-7 flex flex-col gap-1 w-full">
                {/* Location dropdown */}
                <div className="">
                  <label
                    className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
                    htmlFor="age-selection"
                  >
                    Location Tracking
                  </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="enable_traking"
                    id="enable_traking"
                    value={props.values.enable_traking}
                    onChange={props.handleChange}
                    className={`input-wrapper border border-[#f5f8fa] 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={+0}>Disabled</option>
                    <option value={+100}>Enabled</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;

// Calculate the current year and the year 3 years before the current year
const currentYear = new Date().getFullYear();
const startYear = currentYear - 3;

// Generate an array of years from 4 years before the current year to 18 years before the current year
const years = Array.from({ length: 15 }, (_, index) => startYear - index).reverse();
// const latestYears = years.slice(0, process.env.REACT_APP_FAMILY_YEAR_RANGE);

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" },
];