"use client";
import AppContext from "@ctx/AppContext";
import moment from "jalali-moment";
import { useRouter } from "next/navigation";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect, useState } from "react";
import { Swiper, SwiperSlide } from "swiper/react";

const TasksCard = () => {
  const CTX = useContext(AppContext);
  const tasksData = CTX.state.tasksData;
  const router = useRouter();

  const [showAllTasks, setShowAllTasks] = useState(false);
  const [showJust5TasksData, setShowJust5TasksData] = useState(null);

  useEffect(() => {
    if (tasksData.length > 5) {
      setShowJust5TasksData(tasksData.slice(0, 5));
    } else {
      setShowJust5TasksData(tasksData);
    }
  }, [tasksData]);

  const goToEditTask = (id) => {
    CTX.setGoToEditTask(true);
    router.push("/tasks/add-task?new=false");
    CTX.GetTask(id);
    CTX.setIdEditTask(id);
  };

  return (
    <>
      {showAllTasks ? (
        <div className="grid grid-cols-2 gap-3">
          {tasksData.map((e) => (
            <div
              className=" bg-white p-1  rounded-3xl overflow-hidden relative  mt-5"
              onClick={() => goToEditTask(e.id)}
            >
              <div className="flex  mx-2">
                <div className="bg-secondaryLighter-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-secondary-200">
                  {e?.scheduleType == 0
                    ? "روزانه"
                    : e?.scheduleType == 1
                    ? "هفتگی"
                    : e?.scheduleType == 2
                    ? "مخصوص"
                    : ""}
                </div>
              </div>
              <div className=" relative  m-2  text-white">
                <div className="text-right">
                  <h4 className="mb-0 text-primary-300  font-semibold text-sm">
                    {e?.title}{" "}
                  </h4>
                </div>
              </div>

              <div className="flex">
                {e?.scheduleType == 2 && (
                  <div className=" w-fit relative text-[12px] my-2 pr-1 rounded-3xl text-primary-200">
                    <PersianNumber
                      number={moment(e?.setFor).format("jYYYY/jM/jD")}
                    />{" "}
                  </div>
                )}

                <div className="bg-primary-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-primary-300">
                  {e?.shifts[0]}
                </div>
              </div>
            </div>
          ))}
        </div>
      ) : (
        <Swiper
          spaceBetween={20}
          slidesPerView={1.6}
          onSlideChange={() => console.log("slide change")}
          onSwiper={(swiper) => console.log(swiper)}
        >
          {showJust5TasksData?.map((e) => (
            <SwiperSlide>
              <div
                className=" bg-white p-1  rounded-3xl overflow-hidden relative  mt-5"
                onClick={() => goToEditTask(e.id)}
              >
                <div className="flex mx-2">
                  <div className="bg-secondaryLighter-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-secondary-200">
                    {e?.scheduleType == 0
                      ? "روزانه"
                      : e?.scheduleType == 1
                      ? "هفتگی"
                      : e?.scheduleType == 2
                      ? "مخصوص"
                      : ""}
                  </div>
                  <div className="bg-secondaryLighter-100 w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-secondary-200">
                    {e?.shifts[0]}
                  </div>
                </div>
                <div className=" relative  m-2  text-white">
                  <div className="text-right h-[45px] overflow-hidden">
                    <h4 className="mb-0 text-primary-300  font-semibold text-sm ">
                      {e?.title}{" "}
                    </h4>
                  </div>

                  <div className="flex">
                    <div className="flex rtl mt-2 w-full">
                      <div className="absolute right-[0px] bg-red-900 w-[40px] h-[40px] rounded-full border-2 z-[1]"></div>
                      <div className="absolute right-[13px] bg-green-900 w-[40px] h-[40px] rounded-full border-2 z-[2]"></div>
                      <div className="absolute right-[26px] bg-sky-900 w-[40px] h-[40px] rounded-full border-2 z-[3]"></div>
                    </div>

                    <div className="relative w-full">
                      <p className="text-black text-sm mt-4">
                        +
                        <strong className="mx-1">
                          <PersianNumber number={3} />
                        </strong>
                        نفر دیگر
                      </p>
                    </div>
                  </div>

                  <div className="flex mt-6 relative">
                    <div>
                      <svg
                        width="20"
                        height="20"
                        viewBox="0 0 14 14"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path
                          d="M11.0833 2.33332H9.91667V1.74999C9.91667 1.59528 9.85522 1.44691 9.74582 1.33751C9.63642 1.22811 9.48805 1.16666 9.33334 1.16666C9.17863 1.16666 9.03026 1.22811 8.92086 1.33751C8.81146 1.44691 8.75001 1.59528 8.75001 1.74999V2.33332H5.25001V1.74999C5.25001 1.59528 5.18855 1.44691 5.07915 1.33751C4.96975 1.22811 4.82138 1.16666 4.66667 1.16666C4.51196 1.16666 4.36359 1.22811 4.25419 1.33751C4.1448 1.44691 4.08334 1.59528 4.08334 1.74999V2.33332H2.91667C2.45254 2.33332 2.00742 2.5177 1.67923 2.84589C1.35105 3.17408 1.16667 3.61919 1.16667 4.08332V11.0833C1.16667 11.5475 1.35105 11.9926 1.67923 12.3208C2.00742 12.6489 2.45254 12.8333 2.91667 12.8333H11.0833C11.5475 12.8333 11.9926 12.6489 12.3208 12.3208C12.649 11.9926 12.8333 11.5475 12.8333 11.0833V4.08332C12.8333 3.61919 12.649 3.17408 12.3208 2.84589C11.9926 2.5177 11.5475 2.33332 11.0833 2.33332ZM11.6667 11.0833C11.6667 11.238 11.6052 11.3864 11.4958 11.4958C11.3864 11.6052 11.238 11.6667 11.0833 11.6667H2.91667C2.76196 11.6667 2.61359 11.6052 2.50419 11.4958C2.3948 11.3864 2.33334 11.238 2.33334 11.0833V6.99999H11.6667V11.0833ZM11.6667 5.83332H2.33334V4.08332C2.33334 3.92861 2.3948 3.78024 2.50419 3.67084C2.61359 3.56145 2.76196 3.49999 2.91667 3.49999H4.08334V4.08332C4.08334 4.23803 4.1448 4.38641 4.25419 4.4958C4.36359 4.6052 4.51196 4.66666 4.66667 4.66666C4.82138 4.66666 4.96975 4.6052 5.07915 4.4958C5.18855 4.38641 5.25001 4.23803 5.25001 4.08332V3.49999H8.75001V4.08332C8.75001 4.23803 8.81146 4.38641 8.92086 4.4958C9.03026 4.6052 9.17863 4.66666 9.33334 4.66666C9.48805 4.66666 9.63642 4.6052 9.74582 4.4958C9.85522 4.38641 9.91667 4.23803 9.91667 4.08332V3.49999H11.0833C11.238 3.49999 11.3864 3.56145 11.4958 3.67084C11.6052 3.78024 11.6667 3.92861 11.6667 4.08332V5.83332Z"
                          fill="#888888"
                        />
                      </svg>
                    </div>
                    <p className="mb-0 text-textMain-100 text-sm opacity-70 mr-1">
                      <PersianNumber
                        number={moment(e?.setFor).format("jYYYY/jM/jD")}
                      />
                    </p>
                  </div>
                </div>
              </div>
            </SwiperSlide>
          ))}
          <SwiperSlide>
            {tasksData.length > 5 && (
              <div
                className=" bg-white p-1  rounded-3xl overflow-hidden h-[180px]  mt-5 w-4/12"
                onClick={() => setShowAllTasks(true)}
              >
                <div className="pt-[60px]">
                  <p className="mb-0 text-sm text-center text-primary-300 font-bold">
                    مشاهده بیشتر
                  </p>
                </div>
              </div>
            )}
          </SwiperSlide>
        </Swiper>
      )}
    </>
  );
};

export default TasksCard;