import React, { useCallback, useEffect, useMemo, useState } from "react";
import InputCom from "../Helpers/Inputs/InputCom";
import Layout from "../Partials/Layout";
import FamilyTable from "./FamilyTable";
import SiteService from "../../services/SiteService";
import ModalCom from "../Helpers/ModalCom";
import FamilyManageTabs from "./FamilyManageTabs";
import { useLocation } from "react-router-dom";

export default function FamilyManage() {
  const [selectTab, setValue] = useState("today");
  const [selectedAge, setSelectedAge] = useState(undefined);
  const [familyList, setFamilyList] = useState([]);
  const [loader, setLoader] = useState(false);
  const [popUp, setPopUp] = useState(false);
  const [listReload, setListReload] = useState(false);
  const [msgErr, setMsgErr] = useState("");
  const [formData, setFormData] = useState({
    first_name: "",
    last_name: "",
  });

  let location = useLocation();
  let accountDetails = location?.state

  const apiCall = useMemo(() => new SiteService(), []);

  // This is to make sure it's called once and used everywhere
  let memberId = localStorage.getItem("member_id");
  let uid = localStorage.getItem("uid");
  let sessionId = localStorage.getItem("session_token");

  const popUpHandler = () => {
    setPopUp((prev) => !prev);
  };

  //   tab handler
  const filterHandler = (value) => {
    setValue(value);
  };

  // member listing
  const memberList = useCallback(async () => {
    setLoader(true);
    try {
      let reqData = {
        member_id: memberId,
        uid: uid,
        session_id: sessionId,
        limit: 20,
        offset: 0,
        action: 22010,
      };

      let res = await apiCall.familyListings(reqData);
      const { data } = res;
      if (data?.internal_return >= 0 && data?.status == "OK") {
        let { result_list } = data;
        setFamilyList(result_list);
        setLoader(false);
      } else return;
    } catch (error) {
      setLoader(false);
      throw new Error(error);
    }
  }, [apiCall, memberId, sessionId, uid]);

  useEffect(() => {
    memberList();
  }, [listReload, memberList]);

  console.log('Ebueb', familyList)

  return (
    <Layout>
      {/*<CommonHead />*/}
      <div className="notification-page w-full mb-10">
        <div className="notification-wrapper w-full">
          {/* heading */}
          <div className="sm:flex justify-between items-center mb-6">
            <div className="mb-5 sm:mb-0">
              <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
                <span
                  className={`${selectTab === "today" ? "block" : "hidden"}`}
                >
                  Manage Family
                </span>
              </h1>
            </div>
            <div className="slider-btns flex space-x-4">
              <div
                onClick={() => filterHandler("today")}
                className="relative"
              ></div>
            </div>
          </div>
          <FamilyManageTabs accountDetails={accountDetails} loader={loader} />
        </div>
      </div>
    </Layout>
  );
}