"use client";

import React, { useContext, useEffect, useState } from "react";
import moment from "jalali-moment";
import "moment/locale/fa"; // Set the locale to Farsi (Persian)
import AppHeader from "@comp/AppHeader/page";
import { Swiper, SwiperSlide } from "swiper/react";
import PersianNumber from "plugins/PersianNumber";
import { PersianD, PersianDay, PersianM, holidays } from "datacalender";
import AppContext from "@ctx/AppContext";
import Input from "plugins/Input/page";
import { toast } from "react-toastify";
import Avatar from "boring-avatars";
import BottomManageShift from "plugins/BottomSheet/BottomManageShift";
import BottomSheetAddUserToPositionShiftPlan from "plugins/BottomSheet/BottomSheetAddUserToPositionShiftPlan";
import Buttonbriz from "plugins/Buttonbriz/page";

const Calendar = () => {
  const CTX = useContext(AppContext);
  const shiftsData = CTX.state.shiftsData;
  const searchUserChoose = CTX.state.searchUserChoose;
  const usersData = CTX.state.usersData;
  const routinesData = CTX.state.routinesData;
  const routineShiftPlan = CTX.state.routineShiftPlan;
  const positionsData = CTX.state.positionsData;
  const shiftPlanData = CTX.state.shiftPlanData;

  const [daysUntilWeek, setDaysUntilWeek] = useState([]);
  const [selectDay, setSelectDay] = useState(null);
  const [selectShift, setselectShift] = useState(-1);
  const [selectRoutine, setSelectRoutine] = useState(-1);
  const [shiftsPlan, setShiftsPlan] = useState([]);
  const [manageShiftEmployeesData, setManageShiftEmployeesData] = useState([]);
  const [editManageShift, setEditManageShift] = useState(false);

  const [shiftPlanSteps, setShiftPlanSteps] = useState(0);

  const [positionSelectNameBottomSheet, setPositionSelectNameBottomSheet] =
    useState([]);
  const [positionSelectIdBottomSheet, setPositionSelectIdBottomSheet] =
    useState([]);
  const [userAndPositionIds, setUserAndPositionIds] = useState([]);
  const [idRoutineShiftPlan, setIdRoutineShiftPlan] = useState(null);
  const [currentShiftPlanId, setCurrentShiftPlanId] = useState(null);

  const week = [
    { key: "شنبه", value: 6 },
    { key: "یکشنبه", value: 0 },
    { key: "دوشنبه", value: 1 },
    { key: "سه شنبه", value: 2 },
    { key: "چهار شنبه", value: 3 },
    { key: "پنج شنبه", value: 4 },
    { key: "جمعه", value: 5 },
  ];
  const today = moment().format("jYYYY/jM/jD"); // Get the current Jalali date

  const daysInCurrentMonth = moment(today, "jYYYY/jM/jD")
    .endOf("jMonth")
    .jDate();

  const daysEndOfMonth = () => {
    const today = moment();
    const lastDayOfNextWeek = today.clone().add(1, "week").endOf("week");

    const daysArray = [];
    let currentDate = today.clone();

    while (currentDate.isBefore(lastDayOfNextWeek, "day")) {
      const shamsiDate = currentDate.format("jYYYY/jM/jD");
      const dayOfWeek = week.find((day) => day.value === currentDate.day()).key;
      const isToday = currentDate.isSame(moment(), "day");
      const value = currentDate.day();

      daysArray.push({
        checkDay: shamsiDate,
        date: currentDate.format("jD / jM"),
        dayOfWeek,
        isToday,
        value,
      });

      currentDate.add(1, "day");
    }
    console.log(daysArray);

    return setDaysUntilWeek(daysArray);
  };

  const handleManageShiftEmployeesOpen = (e) => {
    setManageShiftEmployeesData(
      usersData.map((item) => ({
        key:
          item.firstName +
          " " +
          item.lastName +
          "( " +
          item.roleNames[0] +
          " )",

        value: item.userId,
      }))
    );
  };

  const body = {
    planDate:
      daysUntilWeek[selectDay]?.checkDay &&
      moment.utc(daysUntilWeek[selectDay].checkDay, "jYYYY-jMM-jDDTHH").unix() *
        1000,
    shiftId: shiftsPlan && shiftsPlan[selectShift]?.id,
    routineId: routinesData && routinesData[selectRoutine]?.id,
    userAndPositionIds,
  };

  const bodyUpdate = {
    planDate:
      daysUntilWeek[selectDay]?.checkDay &&
      moment.utc(daysUntilWeek[selectDay].checkDay, "jYYYY-jMM-jDDTHH").unix() *
        1000,
    shiftId: shiftsPlan && shiftsPlan[selectShift]?.id,
    routineId: routinesData && routinesData[selectRoutine]?.id,
    userAndPositionIds,
    id: currentShiftPlanId,
  };

  const handleRoutineShiftPlan = (index, id) => {
    setSelectRoutine(index);
    setShiftPlanSteps(1);
    setIdRoutineShiftPlan(id);
  };

  const handleRoutineShiftPlanWithDay = (index) => {
    setSelectDay(index);
    setShiftPlanSteps(2);

    CTX.GetRoutineShiftPlan(
      idRoutineShiftPlan,
      moment(daysUntilWeek[index]?.checkDay, "jYYYY-jM-jD").unix() * 1000
    );
  };

  const handleCreateShiftPlan = (update) => {
    if (update == "UPDATE") {
      CTX.UpdateShiftPlan(bodyUpdate);
      setShiftPlanSteps(1);
    } else {
      CTX.CreateShifPlan(body);
      setShiftPlanSteps(1);
    }
  };

  useEffect(() => {
    CTX.GetRoutines();
    daysEndOfMonth();
    setSelectDay(-1);
    CTX.GetShifts();
    CTX.GetPositions();
  }, []);

  useEffect(() => {
    handleManageShiftEmployeesOpen();
  }, [usersData]);

  useEffect(() => {
    setShiftsPlan(
      routineShiftPlan?.find((e) => e?.day == daysUntilWeek[selectDay]?.value)
        ?.shifts
    );

    setselectShift(-1);
  }, [routineShiftPlan]);

  useEffect(() => {
    console.log("11111", shiftsPlan && shiftsPlan[selectShift]);
    setEditManageShift(false);
    CTX.setShiftPlanData(null);
    if (shiftsPlan && shiftsPlan[selectShift]?.hasCurrentShiftPlan) {
      setEditManageShift(true);
      setCurrentShiftPlanId(shiftsPlan[selectShift]?.currentShiftPlanId);
      CTX.GetShiftPlan(shiftsPlan[selectShift]?.currentShiftPlanId);
    }

    if (!!usersData.length <= 0) {
      // User data is not in state, send request to get user
      CTX.GetUsers();
    }
  }, [selectShift]);

  useEffect(() => {
    console.log(
      "shiftPlanDataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
      shiftPlanData
    );
    setUserAndPositionIds(
      shiftPlanData?.users?.map((e) => ({ key: e.positionId, value: e.userId }))
    );
  }, [shiftPlanData]);

  return (
    <div className="pb-20">
      <AppHeader
        title=" شیفت بندی های هفتگی"
        sub={`شیفت بندی      
        تا
         ${daysInCurrentMonth}
        ${PersianM(moment().format("jM"))}
        
        `}
        icon2={true}
        iconName2="ARROW"
        iconHref2="/home"
      />

      <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-4 rtl">
        <div className="font-bold text-right">
          <p className="mb-0">روتین را انتخاب کنید</p>
        </div>
        <div
          className="flex overflow-auto whitespace-nowrap mb-5"
          id="swich-shifts"
        >
          {routinesData?.map((e, index) => (
            <div
              className={` shadow-sm relative block  max-w-max mx-2  rounded-full mt-2 px-4 py-2 tr03 ${
                selectRoutine == index
                  ? "bg-secondary-100 text-white"
                  : "bg-white opacity-60"
              }`}
              onClick={() => {
                if (shiftPlanSteps >= 1) {
                  toast.error("برای تغییر روتین باید رفرش کنید", {
                    position: "bottom-right",
                    autoClose: 2000,
                    hideProgressBar: false,
                    closeOnClick: true,
                    pauseOnHover: true,
                    draggable: true,
                    progress: undefined,
                  });
                } else {
                  handleRoutineShiftPlan(index, e.id);
                }
              }}
            >
              <p className="mb-0">{e.name}</p>
            </div>
          ))}
        </div>

        {shiftPlanSteps >= 1 && (
          <>
            <div className="font-bold text-right mt-3">
              <p className="mb-0">تاریخ را انتخاب کنید</p>
            </div>
            <Swiper
              spaceBetween={10}
              slidesPerView={4.3}
              // onSlideChange={() => }
              // onSwiper={(swiper) => }
            >
              {daysUntilWeek?.map((e, index) => (
                <SwiperSlide>
                  <div
                    className={`h-[70px] tr03 ${
                      selectDay == index
                        ? "bg-white  rounded-xl"
                        : " opacity-70"
                    }`}
                    key={index}
                    onClick={() => handleRoutineShiftPlanWithDay(index)}
                  >
                    <div className="py-2">
                      <p className="mb-0 text-center ">
                        <PersianNumber
                          number={e.date}
                          style={`text-[20px] ${
                            selectDay == index
                              ? "font-bold"
                              : !!holidays.y1402?.find(
                                  (b) => b.date == e.checkDay
                                )
                              ? "text-red-500"
                              : ""
                          } `}
                        />
                      </p>
                    </div>

                    <div
                      className={`w-fit mx-auto  sahdow  px-1 rounded-full ${
                        selectDay == index
                          ? "bg-secondary-100 text-gray-100"
                          : !!holidays.y1402?.find((b) => b.date == e.checkDay)
                          ? "bg-transparent text-red-500"
                          : "bg-white text-gray-500"
                      }`}
                    >
                      <p className="mb-0 text-center text-sm  ">
                        {/* {PersianD.find((i) => i == e.dayOfWeek)} */}
                        {e.dayOfWeek}
                      </p>
                    </div>
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </>
        )}
      </div>

      {shiftPlanSteps >= 2 && (
        <>
          <div className="bg-body-100 relative top-[-40px] rounded-t-3xl overflow-hidden px-4 rtl">
            <>
              <div className="font-bold text-right mt-3">
                <p className="mb-0">شیفت را انتخاب کنید</p>
              </div>
              {!!routineShiftPlan?.find(
                (e) => e?.day == daysUntilWeek[selectDay]?.value
              ) && shiftsData.length > 0 ? (
                <div
                  className="flex overflow-auto whitespace-nowrap"
                  id="swich-shifts"
                >
                  {shiftsPlan?.map((e, index) => (
                    <div
                      className={` shadow-sm relative block max-w-fit  mx-2  rounded-full mt-2 px-4 py-2 tr03 ${
                        selectShift == index
                          ? "!bg-secondary-100 text-white w-full"
                          : " opacity-60 "
                      }${e.hasCurrentShiftPlan ? "bg-yellow-200" : "bg-white"}`}
                      onClick={() => {
                        setselectShift(index);
                        setShiftPlanSteps(3);
                      }}
                    >
                      <p className="mb-0">{e?.title}</p>
                    </div>
                  ))}
                </div>
              ) : (
                <div className="flex justify-center ">
                  <div className="bg-gray-300  mt-5 w-fit rounded-full    p-2 !px-4">
                    <p className="mb-0 text-gray-600 text-sm">
                      شما شیفتی دراین روز ندارید
                    </p>
                  </div>
                </div>
              )}
            </>
          </div>
        </>
      )}

      {shiftPlanSteps >= 3 && (
        <div className="bg-white relative top-[15px] rounded-t-3xl  p-4 rtl  pt-6  sm:h-auto  pb-20">
          <div className="mx-3 flex justify-center mb-10">
            <div className=" bg-gray-100 rounded-xl w-fit mr-0 p-3">
              <p className="mb-0 text-right text-sm rtl opacity-80">
                ویرایش برای{" "}
                <small className=" text-sm font-bold">
                  {shiftsPlan && shiftsPlan[selectShift]?.title}
                </small>{" "}
                تاریخ{" "}
                <small className=" text-sm font-bold  text-primary-300 bg-white px-2 rounded-full">
                  <PersianNumber
                    number={daysUntilWeek && daysUntilWeek[selectDay]?.checkDay}
                  />
                </small>{" "}
                میباشد
              </p>
            </div>
          </div>

          {positionsData.map((e) => (
            <div className="">
              <div className="flex justify-between  bg-gray-200 rounded-2xl">
                <div className="flex p-2">
                  <div className="m-2">
                    <h4 className="text-base  font-bold">{e.name} </h4>
                  </div>
                </div>

                <div
                  className=" bg-gray-600 shadow-sm rounded-xl m-[15px] h-fit relative "
                  onClick={() => {
                    setPositionSelectIdBottomSheet(e.id);
                    setPositionSelectNameBottomSheet(e.name);
                    CTX.setBottomSheetAddUserToPositionShiftPlanOpen(true);
                  }}
                >
                  <p className="mb-0 text-sm text-white px-2 ">کاربران +</p>
                </div>
              </div>

              {/* <div className=" m-1">
              <Input
                lable="جستجوی افراد"
                id="SearchUser-id"
                name="SearchUser"
                type={"text"}
                value={searchUserCurrntData}
                inputEvent={(e) => {
                  setSearchUserCurrntData(e.target.value);

                  if (!!searchUserChoose.find((b) => b == e.target.value)) {
                    toast.error("نقش تکراری است", {
                      position: "bottom-right",
                      closeOnClick: true,
                    });
                  } else {
                    CTX.setSearchUserChoose((current) => [
                      ...current,
                      e.target.value,
                    ]);
                  }
                }}
                style="text-right"
                select={true}
                selectData={manageShiftEmployeesData}
                theme={1}
                defaultValue={"انتخاب کنید"}
              />
            </div> */}

              <div
                className={`flex j flex-wrap mt-2 rtl ${
                  userAndPositionIds?.length > 0 ? "" : "justify-center"
                }`}
              >
                {userAndPositionIds?.length > 0 ? (
                  userAndPositionIds?.map((item) => (
                    <>
                      {e.id == item.key && (
                        <div className="flex bg-gray-100 p-1 rounded-full m-1 justify-start mb-7 ">
                          <div
                            className="w-[30px] h-[30px] rounded-full bg-gray-400 "
                            // onClick={() => deleteSearchUser(e)}
                          >
                            <Avatar
                              size={30}
                              name={
                                usersData.find((b) => b?.userId == item?.value)
                                  ?.firstName
                              }
                              variant="beam"
                              colors={["#9d9f88", "#83af96", "#b2de93"]}
                            />
                          </div>

                          <div>
                            <p className="mb-0 px-3 text-sm mt-1">
                              {
                                usersData.find((b) => b.userId == item?.value)
                                  ?.firstName
                              }
                            </p>
                          </div>
                        </div>
                      )}
                    </>
                  ))
                ) : (
                  <div className="flex justify-center mb-3 ">
                    <div className="bg-gray-100   w-fit rounded-full   p-2 px-4">
                      چیزی یافت نشد
                    </div>
                  </div>
                )}
              </div>
            </div>
          ))}
          <div>
            {editManageShift ? (
              <Buttonbriz
                title="ویرایش فعالیت"
                color="INFO"
                icon="CHECK"
                buttonEvent={() => handleCreateShiftPlan("UPDATE")}
              />
            ) : (
              <Buttonbriz
                title="ثبت فعالیت"
                color="PRIMARY"
                icon="CHECK"
                buttonEvent={() => handleCreateShiftPlan()}
              />
            )}
          </div>
        </div>
      )}
      <BottomManageShift />
      <BottomSheetAddUserToPositionShiftPlan
        positionName={positionSelectNameBottomSheet}
        positionId={positionSelectIdBottomSheet}
        userAndPositionIds={userAndPositionIds}
        setUserAndPositionIds={setUserAndPositionIds}
        usersData={usersData}
      />
    </div>
  );
};

export default Calendar;
