"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 (
    <>
      {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 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>
        </div>
      ))}
    </>
  );
};

export default TasksCard;