"use client";

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

const TasksCard = ({ tasksData, permissions }) => {
  const CTX = useContext(AppContext);
  const router = useRouter();

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

  return (
    <div className="mt-3">
      {tasksData?.map((e, index) => (
        <div
          className="  py-3  overflow-hidden relative  border-b border-gray-200"
          onClick={() => {
            goToEditTask(e.id);
          }}
        >
          <div className="flex whitespace-nowrap overflow-auto">
            {/* <div className=" w-fit relative px-2 text-[12px] my-2 mx-1  rounded-3xl text-primary-300 bg-red-200 px-2">
              <PersianNumber number={index + 1} />
            </div> */}

            <div className="flex">
              <div className="relative pr-2 text-[11px]   text-primary-500">
                {e?.scheduleType == 0
                  ? "روزانه"
                  : e?.scheduleType == 1
                  ? "هفتگی"
                  : e?.scheduleType == 2
                  ? "مخصوص"
                  : ""}
              </div>

              <div className="w-[2px] h-3 mx-1 bg-primary-200 opacity-75 mt-[2px]"></div>

              <div className=" w-fit relative  text-[11px]  text-secondary-800 h-fit">
                {e?.shifts[0]}
              </div>
              {e?.days?.length > 0 && (
                <>
                  {e?.days.map((s) => (
                    <>
                      <div className="w-[2px] h-3 mx-1 bg-primary-200 opacity-75 mt-[2px]"></div>
                      <div className=" w-fit relative text-[11px]  text-primary-600  h-fit ">
                        {" "}
                        {s}
                      </div>
                    </>
                  ))}
                </>
              )}
            </div>

            <div className="w-[2px] h-3 mx-1 bg-primary-200 opacity-75 mt-[2px]"></div>

            <div className=" w-fit relative text-[11px]  text-secondary-950  h-fit ">
              {" "}
              {e?.positions[0]}
            </div>
          </div>
          <div className=" relative  m-1  text-white">
            <div className="text-right max-h-[40px] overflow-hidden">
              <h4 className="mb-0 text-secondary-950 font-medium text-sm">
                {e?.title}{" "}
              </h4>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default TasksCard;
