"use client";

import AppHeader from "@comp/AppHeader/page";
import AppContext from "@ctx/AppContext";
import BottomSheetCreateRoutine from "plugins/BottomSheet/BottomSheetCreateRoutine";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import ActivityCard from "@comp/TaskPage/ActivityCard/page";
import TasksCard from "@comp/TaskPage/TasksCard/page";
import moment from "jalali-moment";
import HasPermission from "plugins/HasPermission/page";
import GoBack from "plugins/GoBack/page";
import InfiniteScroll from "react-infinite-scroll-component";
import Loading from "plugins/Loading/page";
import { useLongPress } from "@uidotdev/usehooks";
import BottomFilterActivities from "plugins/BottomSheet/BottomFilterActivities";
import NothingFound from "plugins/NothingFound/page";

const page = () => {
  const CTX = useContext(AppContext);
  const activities = CTX.state.activitiesData;
  const pageGetActivity = CTX.state.pageGetActivity;
  const stopGetActivities = CTX.state.stopGetActivities;
  const userStaffData = CTX.state.userStaffData;

  const [activeStaff, setActiveStaff] = useState(-1);
  const [activeStaffId, setActiveStaffId] = useState(-1);
  const [dateQueryFilterValue, setActiveStaffIdValue] = useState(1);

  const handleInfiniteNextFetchActivity = () => {
    CTX.setPageGetActivity((e) => e + 1);
    CTX.GetActivity(
      null,
      null,
      pageGetActivity + 1,
      dateQueryFilterValue,
      activeStaffId
    );
  };

  const habdleActiveStaff = (num, userId) => {
    if (num == activeStaff) {
      setActiveStaff(-1);
    } else {
      CTX.setStopGetActivities(false);
      CTX.setPageGetActivity(0);
      setActiveStaffId(userId);
      setActiveStaff(num);
      CTX.GetActivity(null, null, 0, dateQueryFilterValue, userId);
    }
  };

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

  return (
    <div className="pb-20">
      <AppHeader
        title=" مدیریت فعالیت مجموعه"
        sub=" مدیریت فعالیت ها"
        notif={true}
      />

      <div className="bg-white overflow-hidden p-5 rtl">
        {" "}
        <div className="flex justify-start mb-3">
          <div
            className="border-2 border-secondary-300 px-2 py-1 w-fit rounded-full flex mt-2"
            onClick={() => CTX.setBottomFilterActivitiesOpen(true)}
          >
            <div>
              <svg
                width="15"
                height="15"
                viewBox="0 0 200 226"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M62.5 25.5004C59.1848 25.5004 56.0054 26.8173 53.6612 29.1615C51.317 31.5057 50 34.6852 50 38.0004C50 41.3156 51.317 44.495 53.6612 46.8392C56.0054 49.1834 59.1848 50.5004 62.5 50.5004C65.8152 50.5004 68.9946 49.1834 71.3388 46.8392C73.683 44.495 75 41.3156 75 38.0004C75 34.6852 73.683 31.5057 71.3388 29.1615C68.9946 26.8173 65.8152 25.5004 62.5 25.5004ZM27.125 25.5004C29.7075 18.1812 34.4967 11.8433 40.8325 7.36023C47.1683 2.87717 54.7386 0.469727 62.5 0.469727C70.2614 0.469727 77.8317 2.87717 84.1675 7.36023C90.5033 11.8433 95.2925 18.1812 97.875 25.5004H187.5C190.815 25.5004 193.995 26.8173 196.339 29.1615C198.683 31.5057 200 34.6852 200 38.0004C200 41.3156 198.683 44.495 196.339 46.8392C193.995 49.1834 190.815 50.5004 187.5 50.5004H97.875C95.2925 57.8195 90.5033 64.1574 84.1675 68.6405C77.8317 73.1235 70.2614 75.531 62.5 75.531C54.7386 75.531 47.1683 73.1235 40.8325 68.6405C34.4967 64.1574 29.7075 57.8195 27.125 50.5004H12.5C9.18479 50.5004 6.00537 49.1834 3.66117 46.8392C1.31696 44.495 0 41.3156 0 38.0004C0 34.6852 1.31696 31.5057 3.66117 29.1615C6.00537 26.8173 9.18479 25.5004 12.5 25.5004H27.125ZM137.5 100.5C134.185 100.5 131.005 101.817 128.661 104.162C126.317 106.506 125 109.685 125 113C125 116.316 126.317 119.495 128.661 121.839C131.005 124.183 134.185 125.5 137.5 125.5C140.815 125.5 143.995 124.183 146.339 121.839C148.683 119.495 150 116.316 150 113C150 109.685 148.683 106.506 146.339 104.162C143.995 101.817 140.815 100.5 137.5 100.5ZM102.125 100.5C104.708 93.1812 109.497 86.8433 115.832 82.3602C122.168 77.8772 129.739 75.4697 137.5 75.4697C145.261 75.4697 152.832 77.8772 159.168 82.3602C165.503 86.8433 170.292 93.1812 172.875 100.5H187.5C190.815 100.5 193.995 101.817 196.339 104.162C198.683 106.506 200 109.685 200 113C200 116.316 198.683 119.495 196.339 121.839C193.995 124.183 190.815 125.5 187.5 125.5H172.875C170.292 132.82 165.503 139.157 159.168 143.64C152.832 148.124 145.261 150.531 137.5 150.531C129.739 150.531 122.168 148.124 115.832 143.64C109.497 139.157 104.708 132.82 102.125 125.5H12.5C9.18479 125.5 6.00537 124.183 3.66117 121.839C1.31696 119.495 0 116.316 0 113C0 109.685 1.31696 106.506 3.66117 104.162C6.00537 101.817 9.18479 100.5 12.5 100.5H102.125ZM62.5 175.5C59.1848 175.5 56.0054 176.817 53.6612 179.162C51.317 181.506 50 184.685 50 188C50 191.316 51.317 194.495 53.6612 196.839C56.0054 199.183 59.1848 200.5 62.5 200.5C65.8152 200.5 68.9946 199.183 71.3388 196.839C73.683 194.495 75 191.316 75 188C75 184.685 73.683 181.506 71.3388 179.162C68.9946 176.817 65.8152 175.5 62.5 175.5ZM27.125 175.5C29.7075 168.181 34.4967 161.843 40.8325 157.36C47.1683 152.877 54.7386 150.47 62.5 150.47C70.2614 150.47 77.8317 152.877 84.1675 157.36C90.5033 161.843 95.2925 168.181 97.875 175.5H187.5C190.815 175.5 193.995 176.817 196.339 179.162C198.683 181.506 200 184.685 200 188C200 191.316 198.683 194.495 196.339 196.839C193.995 199.183 190.815 200.5 187.5 200.5H97.875C95.2925 207.82 90.5033 214.157 84.1675 218.64C77.8317 223.124 70.2614 225.531 62.5 225.531C54.7386 225.531 47.1683 223.124 40.8325 218.64C34.4967 214.157 29.7075 207.82 27.125 200.5H12.5C9.18479 200.5 6.00537 199.183 3.66117 196.839C1.31696 194.495 0 191.316 0 188C0 184.685 1.31696 181.506 3.66117 179.162C6.00537 176.817 9.18479 175.5 12.5 175.5H27.125Z"
                  fill="#363636"
                />
              </svg>
            </div>
            <div className="mr-1">
              <p className="mb-0 text-[12px] text-secondary-950 font-medium">
                فیلــتر
              </p>
            </div>
          </div>

          <div className="border-2 border-secondary-300 px-2 py-1 w-fit rounded-full flex mt-2 mr-2 opacity-30">
            <div>
              <svg
                width="15"
                height="15"
                viewBox="0 0 226 227"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M0.400391 113.7C0.400391 93.3004 5.50039 74.4004 15.6004 57.1004C25.7004 39.8004 39.4004 26.1004 56.7004 16.0004C74.0004 5.90039 92.8004 0.900391 113.1 0.900391C128.3 0.900391 142.9 3.90039 156.8 9.80039C170.7 15.7004 182.6 23.8004 192.7 33.8004C202.8 43.8004 210.8 55.8004 216.7 69.8004C222.6 83.8004 225.6 98.3004 225.6 113.7C225.6 128.9 222.6 143.5 216.7 157.4C210.8 171.3 202.7 183.3 192.7 193.3C182.7 203.3 170.7 211.3 156.8 217.2C142.9 223.1 128.4 226.1 113.1 226.1C97.8004 226.1 83.1004 223.1 69.2004 217.2C55.3004 211.3 43.3004 203.2 33.2004 193.2C23.1004 183.2 15.2004 171.2 9.20039 157.4C3.20039 143.6 0.400391 129 0.400391 113.7ZM25.2004 113.7C25.2004 137.4 33.8004 158 51.1004 175.5C68.4004 192.8 89.0004 201.4 113.1 201.4C128.9 201.4 143.6 197.5 157 189.6C170.4 181.7 181.2 171.1 189.1 157.6C197 144.1 201 129.5 201 113.7C201 97.9004 197 83.2004 189.1 69.7004C181.2 56.2004 170.5 45.5004 157 37.6004C143.5 29.7004 128.9 25.8004 113.1 25.8004C97.3004 25.8004 82.6004 29.7004 69.2004 37.6004C55.8004 45.5004 45.0004 56.2004 37.0004 69.7004C29.0004 83.2004 25.2004 97.9004 25.2004 113.7ZM104.4 113.7V47.1004C104.4 44.8004 105.2 42.8004 106.8 41.2004C108.4 39.6004 110.4 38.8004 112.7 38.8004C115 38.8004 117 39.6004 118.6 41.2004C120.2 42.8004 121 44.8004 121 47.1004V105.3H158.8C161.1 105.3 163.1 106.1 164.7 107.7C166.3 109.3 167.1 111.3 167.1 113.6C167.1 115.8 166.3 117.8 164.7 119.5C163.1 121.2 161.1 122 158.8 122H114.4C114.1 122.1 113.5 122.1 112.6 122.1C111.501 122.12 110.409 121.915 109.392 121.498C108.375 121.08 107.454 120.459 106.686 119.672C105.918 118.885 105.319 117.949 104.926 116.922C104.533 115.896 104.354 114.799 104.4 113.7Z"
                  fill="#363636"
                />
              </svg>
            </div>
            <div className="mr-1">
              <p className="mb-0 text-[12px] text-secondary-950 font-medium">
                روز خاص
              </p>
            </div>
          </div>

          <div className="border-2 border-secondary-300 px-2 py-1 w-fit rounded-full flex mt-2 mr-2 opacity-30">
            <div>
              <svg
                width="15"
                height="15"
                viewBox="0 0 200 176"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M26.4372 175.5C16.4372 175.5 9.04137 171.179 4.2497 162.538C-0.541964 153.896 -0.229467 145.404 5.1872 137.063L36.7497 88L5.1872 38.9375C-0.229467 30.6042 -0.541964 22.1125 4.2497 13.4625C9.04137 4.81251 16.4372 0.491679 26.4372 0.500012H130.5C134.666 0.500012 138.575 1.43751 142.225 3.31251C145.875 5.18751 148.841 7.79168 151.125 11.125L195.187 73.625C198.312 78 199.875 82.7917 199.875 88C199.875 93.2083 198.312 98 195.187 102.375L151.125 164.875C148.833 168.208 145.866 170.813 142.225 172.688C138.583 174.563 134.675 175.5 130.5 175.5H26.4372Z"
                  fill="#363636"
                />
              </svg>
            </div>
            <div className="mr-1">
              <p className="mb-0 text-[12px] text-secondary-950 font-medium">
                اولویت
              </p>
            </div>
          </div>
        </div>
        {userStaffData?.map((e, index) => (
          <>
            <div
              className={`px-1 rounded-2xl  ${
                activeStaff == index ? "pt-1" : "py-1"
              }`}
              key={index}
              onClick={() => habdleActiveStaff(index, e?.id)}
            >
              <div
                className={`flex  justify-between bg-gray-50 p-2  ${
                  activeStaff == index
                    ? " rounded-b-0 rounded-t-xl"
                    : "rounded-xl"
                }`}
                // onClick={() => handleListTaskActive(e?.id, index)}
              >
                <p className="mb-0 text-[13px] mt-1">
                  {e?.firstName + " " + e?.lastName}
                </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 ${
                      activeStaff == 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>

            {activeStaff == index && (
              <div className=" mt-3">
                {activities.length != 0 ? (
                  <InfiniteScroll
                    dataLength={activities.length}
                    next={handleInfiniteNextFetchActivity}
                    hasMore={!stopGetActivities}
                  >
                    {activities?.map((e) => (
                      <ActivityCard data={e} />
                    ))}
                  </InfiniteScroll>
                ) : (
                  <NothingFound />
                )}
              </div>
            )}
          </>
        ))}
      </div>

      <BottomFilterActivities
        setActiveStaffIdValue={setActiveStaffIdValue}
        dateQueryFilterValue={dateQueryFilterValue}
        activeStaffId={activeStaffId}
        setActiveStaff={setActiveStaff}
      />
    </div>
  );
};

export default page;