import React, {
  Suspense,
  lazy,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { useReactToPrint } from "react-to-print";
import profile from "../../assets/images/profile-info-profile.png";
import localImgLoad from "../../lib/localImgLoad";
import usersService from "../../services/UsersService";
import LoadingSpinner from "../Spinners/LoadingSpinner";
import AssignTaskPopout from "./FamilyPopout/AssignTaskPopout";

// Lazy Imports for components
const FamilyWaitlist = lazy(() => import("./Tabs/FamilyWaitlist"));
const FamilyAccount = lazy(() => import("./Tabs/FamilyAccount"));
const FamilyProfile = lazy(() => import("./Tabs/FamilyProfile"));
const FamilyTasks = lazy(() => import("./Tabs/FamilyTasks"));
const ProfileInfo = lazy(() => import("./Tabs/ProfileInfo"));
const FamilyPending = lazy(() => import("./Tabs/FamilyPending"));

export default function FamilyManageTabs({
  className,
  accountDetails,
  listReload,
  loader,
}) {
  const initialDetailState = {
    loading: false,
    data: null,
  };

  const [details, setDetails] = useState({
    familyDetails: { ...initialDetailState },
    familyTasks: { ...initialDetailState },
    familyWaitList: { ...initialDetailState },
    familyPending: { ...initialDetailState },
  });

  const resetDetails = () => {
    setDetails({
      familyDetails: { ...initialDetailState },
      familyTasks: { ...initialDetailState },
      familyWaitList: { ...initialDetailState },
      familyPending: { ...initialDetailState },
    });
  };

  const [familyTask, setFamilyTask] = useState({ loading: false, data: [] });
  const [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK

  const [errMsg, setErrMsg] = useState("");
  const [familyTaskPopout, setFamilyTaskPopout] = useState(false);
  const [profileImg, setProfileImg] = useState(profile);
  const profileImgInput = useRef(null);
  const apiCall = useMemo(() => new usersService(), []);

  const familyPopUpHandler = () => {
    setFamilyTaskPopout((prev) => !prev);
  };

  const browseProfileImg = () => {
    profileImgInput.current.click();
  };

  const profileImgChangeHandler = (e) => {
    if (e.target.value !== "") {
      const imgReader = new FileReader();
      imgReader.onload = (event) => {
        setProfileImg(event.target.result);
      };
      imgReader.readAsDataURL(e.target.files[0]);
    }
  };

  const accountRef = useRef();

  const useHandlePrint = useReactToPrint({
    content: () => accountRef.current,
  });

  const tabs = [
    { id: 1, name: "Tasks" },
    { id: 2, name: "Waiting" },
    { id: 3, name: "Pending" },
  ];

  const [tab, setTab] = useState(tabs[0].name);

  const tabHandler = (value) => {
    setTab(value);
  };

  const tabComponents = {
    Tasks: (
      <FamilyTasks
        className={className}
        loader={details.familyTasks.loading}
        familyData={details.familyTasks.data}
        accountDetails={accountDetails}
      />
    ),
    Waiting: (
      <FamilyWaitlist
        familyData={details.familyWaitList.data}
        accountDetails={accountDetails}
        loader={details.familyWaitList.loading}
      />
    ),
    Pending: (
      <FamilyPending
        familyData={details.familyPending.data}
        accountDetails={accountDetails}
        loader={details.familyPending.loading}
      />
    ),
    Account: (
      <FamilyAccount
        familyData={details.familyDetails.data}
        myRef={accountRef}
        loader={details.familyDetails.loading}
        handlePrint={useHandlePrint}
      />
    ),
    Profile: <FamilyProfile />,
  };

  const defaultTabComponent = (
    <FamilyTasks
      className={className}
      loader={details.familyTasks.loading}
      familyData={details.familyTasks.data}
      accountDetails={accountDetails}
    />
  );

  const selectedTabComponent = tabComponents[tab] || defaultTabComponent;

  useEffect(() => {
    const manageFamily = async () => {
      try {
        resetDetails();

        setDetails({
          familyDetails: { loading: true },
          familyTasks: { loading: true },
          familyWaitList: { loading: true },
          familyPending: { loading: true },
        });

        const { family_uid } = accountDetails;
        const reqData = { family_uid };

        const [familyRes, tasksRes, familyWaitRes, familyPending] =
          await Promise.all([
            apiCall.ManageFamily(reqData),
            apiCall.ManageTasks(reqData),
            apiCall.ManageFamilyWaitlist(),
            apiCall.ManageFamilyPending(),
          ]);

        const familyData = familyRes.data;
        const tasksData = tasksRes.data;
        const familyWaitData = familyWaitRes.data;
        const familyPendingData = familyPending.data;

        // In order to check errors
        const checkDataError = (data) => data?.internal_return < 0;

        if (
          checkDataError(familyData) ||
          checkDataError(tasksData) ||
          checkDataError(familyWaitData) ||
          checkDataError(familyPendingData)
        ) {
          return;
        }

        setDetails({
          familyDetails: { loading: false, data: familyData },
          familyTasks: { loading: false, data: tasksData },
          familyWaitList: { loading: false, data: familyWaitData },
          familyPending: { loading: false, data: familyPendingData },
        });
      } catch (error) {
        resetDetails();
        setErrMsg("An error occurred");
        throw new Error(error);
      }
    };

    manageFamily();
  }, []);

  useEffect(() => {
    let checkFamilyTask = true;
    const reqData = {
      limit: 30,
      offset: 0,
      job_type: "FAMILY",
      action: 13005,
    };

    if (checkFamilyTask) {
      setFamilyTask({ loading: true });
      apiCall
        .getMyJobList(reqData)
        .then((res) => {
          setFamilyTask({ loading: false, data: res?.data?.result_list });
          if (res?.data?.result_list?.length) {
            setActiveTask((prev) => ({
              ...prev,
              data: res?.data?.result_list[0],
            }));
          }
        })
        .catch((err) => {
          setFamilyTask({ loading: false, data: [] });
          console.log("Error", err);
        });
    }

    return () => {
      checkFamilyTask = false;
    };
  }, []);

  return (
    <div
      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow h-full ${
        className || ""
      }`}
    >
      <div className="relative w-full sm:rounded-lg overflow-x-auto">
        <Suspense
          fallback={
            <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
              <LoadingSpinner size="16" color="sky-blue" />
            </div>
          }
        >
          <div className="w-full h-full text-sm text-left text-gray-500 dark:text-gray-400 relative grid grid-cols-4 min-h-[575px]">
            <div className="border-r border-[#E3E4FE] dark:border-[#a7a9b533] p-6 h-full flex flex-col justify-between">
              <ProfileInfo
                profileImg={profileImg}
                profileImgInput={profileImgInput}
                profileImgChangeHandler={profileImgChangeHandler}
                browseProfileImg={browseProfileImg}
                accountDetails={accountDetails}
              />
              <div className="mt-4 flex justify-start items-center gap-2">
                <button
                  onClick={() => tabHandler("Account")}
                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                >
                  <img
                    src={localImgLoad("images/icons/account.svg")}
                    className="max-w-[30px] w-full"
                    alt="Settings-Icon"
                  />
                  <p className="text-lg text-sky-blue">Acc.</p>
                </button>
                <button
                  onClick={() => tabHandler("Profile")}
                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                >
                  <img
                    src={localImgLoad("images/icons/profile.svg")}
                    className="max-w-[30px] w-full"
                    alt="Settings-Icon"
                  />
                  <p className="text-lg text-sky-blue">Profile</p>
                </button>
              </div>
            </div>
            <div className="col-span-3 h-full w-full">
              <div className="flex flex-col w-full">
                <div className="w-full pr-8 flex items-center gap-1 border-b border-b-[#FAFAF]">
                  <ul className="flex gap-2 items-center w-full">
                    {tabs.map(({ name, id }) => (
                      <li
                        onClick={() => tabHandler(name)}
                        className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
                          tab === name
                            ? "text-purple border-r"
                            : "text-thin-light-gray"
                        }`}
                        key={id}
                      >
                        <h1>{name}</h1>
                      </li>
                    ))}
                  </ul>
                  <button
                    type="button"
                    onClick={familyPopUpHandler}
                    className="p-1 my-1 w-[100px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
                  >
                    Add task
                  </button>
                </div>

                <div className="flex-[0.9] h-full">
                  <div className="h-full relative overflow-y-auto">
                    <Suspense
                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
                    >
                      {selectedTabComponent}
                    </Suspense>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Suspense>
      </div>

      {familyTaskPopout && (
        <AssignTaskPopout
          action={familyPopUpHandler}
          situation={familyTaskPopout}
          familyTask={familyTask}
          setFamilyTask={setFamilyTask}
          setActiveTask={setActiveTask}
          activeTask={activeTask}
          familyDetailsData={details.familyDetails.data}
        />
      )}
    </div>
  );
}