"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);
    }
  };

  console.log("tasksData", tasksData.days);

  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="bg-secondary-50 flex rounded-full  ">
              <div className="w-fit relative pr-2 text-[11px]  rounded-full   text-secondary-200">
                {e?.scheduleType == 0
                  ? "روزانه"
                  : e?.scheduleType == 1
                  ? "هفتگی"
                  : e?.scheduleType == 2
                  ? "مخصوص"
                  : ""}
              </div>
              <p className="mb-0 px-1 text-[10px] mt-1 text-secondary-200 opacity-60">
                -
              </p>
              <div className=" w-fit relative pl-2 text-[12px]  rounded-full   text-secondary-200">
                {e?.shifts[0]}
              </div>
            </div>

            {e?.days?.length > 0 && (
              <>
                {e?.days.map((s) => (
                  <div className=" w-fit relative px-2 text-[12px] mr-1  rounded-full bg-primary-100 text-green-700 text-center ">
                    {" "}
                    {s}
                  </div>
                ))}
              </>
            )}

            <div className=" w-fit relative px-2 text-[12px] mr-1  rounded-full bg-gray-300 text-gray-600 text-center ">
              {" "}
              {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-primary-300  font-medium text-[13px] ">
                {e?.title}{" "}
              </h4>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default TasksCard;