"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 PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect, useState } from "react";

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

const Employees = (props) => {
  const CTX = useContext(AppContext);

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

  useEffect(() => {
    CTX.GetRoles();
    CTX.GetUsers();
    CTX.GetRoutines();
    CTX.GetSections();
    CTX.GetPositions();
  }, []);

  const routinesData = CTX.state.routinesData;
  const sectionsData = CTX.state.sectionsData;
  const usersData = CTX.state.usersData;
  const positionsData = CTX.state.positionsData;

  return (
    <div className="pb-20">
      <AppHeader
        title="  مدیریت کارکنان و نقش ها"
        sub=" شما 12 نفر همکار در مجموعه دارید"
        icon2={true}
        iconName2="ARROW"
        iconHref2="/home"
        iconEvent2={() => {
          return undefined;
        }}
      />

      <div className="bg-body-100 relative top-[-30px] rounded-t-3xl overflow-hidden p-3 rtl">
        <div>
          <div
            className="flex justify-between mt-7 bg-white rounded-2xl"
            onClick={() => setActiveSection(0)}
          >
            <div className="flex p-2">
              <div className="bg-gray-100 rounded-xl p-3 w-fit">
                <p className="mb-0 text-center pt-3">
                  <PersianNumber number={1} style="text-[30px] " />
                </p>
              </div>
              <div className="m-2">
                <h4 className="text-base  font-bold">
                  مدیریت روتین های مجموعه
                </h4>
                <p className="mb-0 text-[10px] opacity-90 ">
                  شما
                  <strong className="mx-1 text-primary-300">
                    <PersianNumber number={routinesData?.length} />
                  </strong>
                  روتین فعال دارید
                </p>
              </div>
            </div>

            {activeSection == 0 ? (
              <div
                className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
                onClick={() => CTX.setBottomSheetCreateRoutineOpen(true)}
              >
                <svg
                  width="22"
                  height="22"
                  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="flex justify-between mt-3">
          <div>
            <h4 className="text-base  font-bold">مدیریت نقش های مجموعه</h4>
            <p className="mb-0 text-[10px] opacity-90 ">
              شما
              <strong className="mx-1 text-primary-300">
                <PersianNumber number={rolesData?.length} />
              </strong>
              نقش فعال دارید
            </p>
          </div>

          <div
            className="w-[40px] h-[40px] bg-white shadow-sm rounded-xl "
            onClick={() => CTX.setBottomSheetCreateRoleOpen(true)}
          >
            <svg
              width="22"
              height="22"
              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>

        <RolesEmployees /> */}

        <div>
          <div
            className="flex justify-between mt-7 bg-white rounded-2xl"
            onClick={() => setActiveSection(1)}
          >
            <div className="flex p-2">
              <div className="bg-gray-100 rounded-xl p-3 w-fit">
                <p className="mb-0 text-center pt-3">
                  <PersianNumber number={2} style="text-[30px] " />
                </p>
              </div>
              <div className="m-2">
                <h4 className="text-base  font-bold">مدیریت سکشن ها مجموعه</h4>
                <p className="mb-0 text-[10px] opacity-90 ">
                  شما
                  <strong className="mx-1 text-primary-300">
                    <PersianNumber number={sectionsData?.length} />
                  </strong>
                  سکشن فعال دارید
                </p>
              </div>
            </div>
            {activeSection == 1 ? (
              <div
                className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
                onClick={() => CTX.setBottomSheetCreateSectionOpen(true)}
              >
                <svg
                  width="22"
                  height="22"
                  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>
          <div
            className="flex justify-between mt-7 bg-white rounded-2xl"
            onClick={() => setActiveSection(2)}
          >
            <div className="flex p-2">
              <div className="bg-gray-100 rounded-xl p-3 w-fit">
                <p className="mb-0 text-center pt-3">
                  <PersianNumber number={3} style="text-[30px] " />
                </p>
              </div>
              <div className="m-2">
                <h4 className="text-base  font-bold">
                  مدیریت پوزیشن های مجموعه
                </h4>
                <p className="mb-0 text-[10px] opacity-90 ">
                  شما
                  <strong className="mx-1 text-primary-300">
                    <PersianNumber number={positionsData?.length} />
                  </strong>
                  پوزیشن فعال دارید
                </p>
              </div>
            </div>
            {activeSection == 2 ? (
              <div
                className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
                onClick={() => CTX.setBottomSheetCreatePositionOpen(true)}
              >
                <svg
                  width="22"
                  height="22"
                  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>
          <div
            className="flex justify-between mt-7 bg-white rounded-2xl"
            onClick={() => setActiveSection(3)}
          >
            <div className="flex p-2">
              <div className="bg-gray-100 rounded-xl p-3 w-fit">
                <p className="mb-0 text-center pt-3">
                  <PersianNumber number={4} style="text-[30px] " />
                </p>
              </div>
              <div className="m-2">
                <h4 className="text-base  font-bold">مدیریت کارکنان مجموعه</h4>
                <p className="mb-0 text-[10px] opacity-90 ">
                  شما
                  <strong className="mx-1 text-primary-300">
                    <PersianNumber number={usersData?.length} />
                  </strong>
                  کارمند فعال دارید
                </p>
              </div>
            </div>

            {activeSection == 3 ? (
              <div
                className="w-[40px] h-[40px] bg-gray-100 shadow-sm rounded-xl m-[15px] "
                onClick={() => CTX.setBottomSheetCreateEmployeesOpen(true)}
              >
                <svg
                  width="22"
                  height="22"
                  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>
      {/* <BottomSheetCreateRole /> */}
      <BottomSheetCreateEmployees />
      <BottomSheetCreateSection />
      <BottomSheetCreateRoutine />
      <BottomSheetCreatePosition />
    </div>
  );
};

export default Employees;