"use client";

import AppContext from "@ctx/AppContext";
import React, { useContext } from "react";
import Avatar from "boring-avatars";
import PersianNumber from "plugins/PersianNumber";
import HasPermission from "plugins/HasPermission/page";
import NothingFound from "plugins/NothingFound/page";
import InfiniteScroll from "react-infinite-scroll-component";
import TasksCard from "@comp/TaskPage/TasksCard/page";
import { useState } from "react";

const TasksEmployees = () => {
  const CTX = useContext(AppContext);
  const tasksData = CTX.state.tasksData;
  const stopGetTasks = CTX.state.stopGetTasks;
  const pageGetTasks = CTX.state.pageGetTasks;
  const shiftsData = CTX.state.shiftsData;
  const permissions = CTX.state.profile?.permissions;

  const [listTaskActive, setListTaskActive] = useState(-1);

  const handleInfiniteNextFetchTask = (id) => {
    CTX.setPageGetTasks((e) => e + 1);
    CTX.GetTasks(pageGetTasks + 1, id);
  };

  const handleListTaskActive = (id, index) => {
    if (index == listTaskActive) {
      setListTaskActive(-1);
    } else {
      CTX.setStopGetTasks(false);
      CTX.setPageGetTasks(0);
      setListTaskActive(-1);
      setTimeout(() => {
        setListTaskActive(index);
      }, 100);
      CTX.GetTasks(0, id);
    }
  };

  return (
    <>
      {shiftsData.length > 0 ? (
        <>
          {shiftsData?.map((e, index) => (
            <>
              <div
                className={`px-1 rounded-2xl ${
                  listTaskActive == index ? "pt-1" : "py-1"
                }`}
                key={index}
              >
                <div
                  className={`flex  justify-between bg-white p-2  ${
                    listTaskActive == index
                      ? " rounded-b-0 rounded-t-xl"
                      : "rounded-xl"
                  }`}
                  onClick={() => handleListTaskActive(e?.id, index)}
                >
                  <p className="mb-0 text-[13px] mt-1">{e?.title}</p>

                  <div className="bg-gray-100 w-[30px] h-[30px] rounded-xl">
                    <svg
                      width="11"
                      height="11"
                      viewBox="0 0 151 89"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                      className={`opacity-80 mt-2 mx-auto tr03 ${
                        listTaskActive == index ? "rotate-180" : ""
                      }`}
                    >
                      <path
                        d="M13.0444 13.1674L75.3606 75.8506L138.044 13.5345"
                        stroke="#424242"
                        stroke-opacity="0.81"
                        stroke-width="25"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </svg>
                  </div>
                </div>
              </div>

              {listTaskActive == index && (
                <div
                  className={`bg-white py-2  mx-1 ${
                    listTaskActive == index
                      ? " rounded-t-0 rounded-b-xl mb-1"
                      : "rounded-xl"
                  }`}
                >
                  {tasksData.length != 0 ? (
                    <InfiniteScroll
                      dataLength={tasksData.length}
                      next={() => handleInfiniteNextFetchTask(e.id)}
                      hasMore={!stopGetTasks}
                    >
                      <TasksCard
                        tasksData={tasksData}
                        permissions={permissions}
                      />
                    </InfiniteScroll>
                  ) : (
                    <NothingFound />
                  )}
                </div>
              )}
            </>
          ))}
        </>
      ) : (
        <NothingFound />
      )}
    </>
  );
};

export default TasksEmployees;