"use client";

import AppHeader from "@comp/AppHeader/page";
import PositionEmployees from "@comp/EmployeesComponent/Position/page";
import RolesEmployees from "@comp/EmployeesComponent/Roles/page";
import Roles from "@comp/EmployeesComponent/Roles/page";
import SectionEmployees from "@comp/EmployeesComponent/Sections/page";
import UsersEmployees from "@comp/EmployeesComponent/Users/page";
import RoutineEmployees from "@comp/EmployeesComponent/routine/page";
import AppContext from "@ctx/AppContext";
import BottomSheetCreateEmployees from "plugins/BottomSheet/BottomSheetCreateEmployees";
import BottomSheetCreatePosition from "plugins/BottomSheet/BottomSheetCreatePosition";
import BottomSheetCreateRole from "plugins/BottomSheet/BottomSheetCreateRole";
import BottomSheetCreateRoutine from "plugins/BottomSheet/BottomSheetCreateRoutine";
import BottomSheetCreateSection from "plugins/BottomSheet/BottomSheetCreateSection";
import BottomSheetCreateShifts from "plugins/BottomSheet/BottomSheetCreateShifts";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect, useState } from "react";
import ShiftsEmployees from "@comp/EmployeesComponent/Shifts/page";
import ParseJwt from "plugins/ParseJwt/page";
import GoBack from "plugins/GoBack/page";
import HasPermission from "plugins/HasPermission/page";
import { useRouter } from "next/navigation";
import TasksEmployees from "@comp/EmployeesComponent/Tasks/page";
import BottomSheetCreateTask from "plugins/BottomSheet/BottomSheetCreateTask";

// import second from "@img/test.png";

const Employees = (props) => {
  const CTX = useContext(AppContext);
  const permissions = CTX.state.profile?.permissions;
  const pageGetTasks = CTX.state.pageGetTasks;

  const router = useRouter();

  const [activeSection, setActiveSection] = useState(0);

  useEffect(() => {
    CTX.GetUnReadNotif();
    CTX.GetRoutines();
  }, []);

  const handleGetApi = (num) => {
    setActiveSection(num);
    switch (num) {
      case 0:
        if (activeSection != num) {
          CTX.GetRoutines();
        }
        break;
      case 1:
        if (activeSection != num) {
          CTX.GetSections();
        }
        break;
      case 2:
        if (activeSection != num) {
          CTX.GetPositions();
          CTX.GetSections();
        }
        break;
      case 3:
        if (activeSection != num) {
          CTX.GetUsers();
          if (HasPermission("ViewRoles", permissions)) {
            CTX.GetRoles();
          }
        }
        break;
      case 4:
        if (activeSection != num) {
          CTX.GetShifts();
          CTX.GetRoutines();
        }
        break;

      case 5:
        if (activeSection != num) {
          CTX.GetShifts();
        }
        break;
      default:
        break;
    }
  };

  // const justLength = CTX.state.justLength;

  return (
    <div className="pb-20">
      <AppHeader
        title="  مدیریت کارکنان و نقش ها"
        sub=" هسته اصلی تنظیمات مجموعه"
      />

      <div className="bg-white overflow-hidden p-5 rtl">
        {" "}
        <div
          className={` ${
            activeSection == 0
              ? "bg-secondary-50 rounded-b-2xl"
              : "border-b border-gray-200 p-2"
          }`}
        >
          <div
            className="flex justify-between   rounded-2xl"
            onClick={() => handleGetApi(0)}
          >
            <div className="flex p-2">
              <div className="bg-secondary-50 rounded-lg w-[30px] h-[30px]">
                <p className="mb-0 text-center pt-1 ">
                  <PersianNumber number={1} style="!text-[15px] " />
                </p>
              </div>
              <div className="pt-1 pr-2 ">
                <h4 className="text-sm  font-bold">مدیریت روتین های مجموعه</h4>
              </div>
            </div>
            {HasPermission("ManageRoutines", permissions) && (
              <>
                {" "}
                {activeSection == 0 ? (
                  <div
                    className="w-[30px] h-[30px] bg-secondary-50 shadow-sm rounded-lg mt-2 ml-3 "
                    onClick={() => CTX.setBottomSheetCreateRoutineOpen(true)}
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="mx-auto mt-2 opacity-70"
                    >
                      <path
                        d="M8 1V15M1 8H15"
                        stroke="#2B2B2B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
                )}
              </>
            )}
          </div>

          {activeSection == 0 && <RoutineEmployees />}
        </div>
        <div
          className={` ${
            activeSection == 1
              ? "bg-secondary-50 rounded-b-2xl"
              : "border-b border-gray-200 p-2"
          }`}
        >
          <div
            className="flex justify-between  rounded-2xl"
            onClick={() => handleGetApi(1)}
          >
            <div className="flex p-2">
              <div className="bg-secondary-50 rounded-lg w-[30px] h-[30px]">
                <p className="mb-0 text-center pt-1 ">
                  <PersianNumber number={2} style="!text-[15px] " />
                </p>
              </div>
              <div className="pt-1 pr-2 ">
                <h4 className="text-sm  font-bold">مدیریت سکشن های مجموعه</h4>
              </div>
            </div>

            {HasPermission("ManageSections", permissions) && (
              <>
                {activeSection == 1 ? (
                  <div
                    className="w-[30px] h-[30px] bg-secondary-50 shadow-sm rounded-lg mt-2 ml-3 "
                    onClick={() => CTX.setBottomSheetCreateSectionOpen(true)}
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="mx-auto mt-2 opacity-70"
                    >
                      <path
                        d="M8 1V15M1 8H15"
                        stroke="#2B2B2B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
                )}
              </>
            )}
          </div>
          {activeSection == 1 && <SectionEmployees />}
        </div>
        <div
          className={` ${
            activeSection == 2
              ? "bg-secondary-50 rounded-b-2xl"
              : "border-b border-gray-200 p-2"
          }`}
        >
          <div className="flex justify-between" onClick={() => handleGetApi(2)}>
            <div className="flex p-2">
              <div className="bg-secondary-50 rounded-lg w-[30px] h-[30px]">
                <p className="mb-0 text-center pt-1 ">
                  <PersianNumber number={3} style="!text-[15px] " />
                </p>
              </div>
              <div className="pt-1 pr-2 ">
                <h4 className="text-sm  font-bold">مدیریت پوزیشن های مجموعه</h4>
              </div>
            </div>

            {HasPermission("ManagePositions", permissions) && (
              <>
                {activeSection == 2 ? (
                  <div
                    className="w-[30px] h-[30px] bg-secondary-50 shadow-sm rounded-lg mt-2 ml-3 "
                    onClick={() => CTX.setBottomSheetCreatePositionOpen(true)}
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="mx-auto mt-2 opacity-70"
                    >
                      <path
                        d="M8 1V15M1 8H15"
                        stroke="#2B2B2B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
                )}
              </>
            )}
          </div>
          {activeSection == 2 && <PositionEmployees />}
        </div>
        <div
          className={` ${
            activeSection == 3
              ? "bg-secondary-50 rounded-b-2xl pb-3"
              : "border-b border-gray-200 p-2"
          }`}
        >
          <div
            className="flex justify-between "
            onClick={() => handleGetApi(3)}
          >
            <div className="flex p-2">
              <div className="bg-secondary-50 rounded-lg w-[30px] h-[30px]">
                <p className="mb-0 text-center pt-1 ">
                  <PersianNumber number={4} style="!text-[15px] " />
                </p>
              </div>
              <div className="pt-1 pr-2 ">
                <h4 className="text-sm  font-bold">مدیریت کارکنان مجموعه</h4>
              </div>
            </div>

            {HasPermission("ManageUsers", permissions) && (
              <>
                {activeSection == 3 ? (
                  <div
                    className="w-[30px] h-[30px] bg-secondary-50 shadow-sm rounded-lg mt-2 ml-3 "
                    onClick={() => CTX.setBottomSheetCreateEmployeesOpen(true)}
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="mx-auto mt-2 opacity-70"
                    >
                      <path
                        d="M8 1V15M1 8H15"
                        stroke="#2B2B2B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
                )}
              </>
            )}
          </div>
          {activeSection == 3 && <UsersEmployees />}
        </div>
        <div
          className={` ${
            activeSection == 4
              ? "bg-secondary-50 rounded-b-2xl pb-3"
              : "border-b border-gray-200 p-2"
          }`}
        >
          <div
            className="flex justify-between "
            onClick={() => handleGetApi(4)}
          >
            <div className="flex p-2">
              <div className="bg-secondary-50 rounded-lg w-[30px] h-[30px]">
                <p className="mb-0 text-center pt-1 ">
                  <PersianNumber number={5} style="!text-[15px] " />
                </p>
              </div>
              <div className="pt-1 pr-2 ">
                <h4 className="text-sm  font-bold">مدیریت شیفت های مجموعه</h4>
              </div>
            </div>

            {HasPermission("ManageShifts", permissions) && (
              <>
                {activeSection == 4 ? (
                  <div
                    className="w-[30px] h-[30px] bg-secondary-50 shadow-sm rounded-lg mt-2 ml-3 "
                    onClick={() => CTX.setBottomSheetCreateShiftsOpen(true)}
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="mx-auto mt-2 opacity-70"
                    >
                      <path
                        d="M8 1V15M1 8H15"
                        stroke="#2B2B2B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
                )}
              </>
            )}
          </div>
          {activeSection == 4 && <ShiftsEmployees />}
        </div>
        <div
          className={` ${
            activeSection == 5
              ? "bg-secondary-50 rounded-b-2xl pb-3"
              : "border-b border-gray-200 p-2"
          }`}
        >
          <div
            className="flex justify-between "
            onClick={() => handleGetApi(5)}
          >
            <div className="flex p-2">
              <div className="bg-secondary-50 rounded-lg w-[30px] h-[30px]">
                <p className="mb-0 text-center pt-1 ">
                  <PersianNumber number={6} style="!text-[15px] " />
                </p>
              </div>
              <div className="pt-1 pr-2 ">
                <h4 className="text-sm  font-bold">افزودن تسک مجموعه</h4>
              </div>
            </div>

            {HasPermission("ManageTasks", permissions) && (
              <>
                {activeSection == 5 ? (
                  <div
                    className="w-[30px] h-[30px] bg-secondary-50 shadow-sm rounded-lg mt-2 ml-3 "
                    onClick={() => {
                      CTX.setTaskData([]);
                      CTX.setIdEditTask("");
                      CTX.setGoToEditTask(false);
                      CTX.setBottomSheetCreateTaskOpen(true);
                    }}
                  >
                    <svg
                      width="15"
                      height="15"
                      viewBox="0 0 16 16"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className="mx-auto mt-2 opacity-70"
                    >
                      <path
                        d="M8 1V15M1 8H15"
                        stroke="#2B2B2B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                ) : (
                  <div className="w-[10px] h-[10px] bg-gray-200 shadow-sm rounded-xl m-[15px] "></div>
                )}
              </>
            )}
          </div>
          {activeSection == 5 && <TasksEmployees />}
        </div>
      </div>
      {/* <BottomSheetCreateRole /> */}
      <BottomSheetCreateEmployees />
      <BottomSheetCreateSection />
      <BottomSheetCreateRoutine />
      <BottomSheetCreatePosition />
      <BottomSheetCreateShifts />
      <BottomSheetCreateTask />
    </div>
  );
};

export default Employees;
