"use client";

import AppContext from "@ctx/AppContext";
import { DaysOfWeek } from "plugins/DaysOfWeek/page";
import HasPermission from "plugins/HasPermission/page";
import NothingFound from "plugins/NothingFound/page";
import PersianNumber from "plugins/PersianNumber";
import { getTimeOfDay } from "plugins/TimeOfDay/page";
import React, { useContext } from "react";

const ShiftsEmployees = () => {
  const CTX = useContext(AppContext);
  const shiftsData = CTX.state.shiftsData;
  const permissions = CTX.state.profile?.permissions;

  const goToEditUser = (id) => {
    CTX.setGoToEditShift(true);
    CTX.setBottomSheetCreateShiftsOpen(true);
    CTX.setIdEditShift(id);
  };

  return (
    <>
      {shiftsData.length > 0 ? (
        <>
          {shiftsData &&
            shiftsData.map((e) => (
              <>
                <div className="   m-2">
                  <div className=" bg-white shadow-sm rounded-3xl   p-2 flex justify-between w-full h-fit pr-5  ">
                    <div className="flex">
                      <h4 className="text-sm  font-bold text-secondary-950 mt-1">
                        {e?.title}{" "}
                      </h4>

                      <div className="w-[2px] h-5 mx-2 bg-primary-200 opacity-75 mt-1 "></div>
                      <div className="flex mt-1">
                        <p className="mb-0 text-sm text-secondary-600 ">
                          <PersianNumber
                            number={
                              e?.startAt?.split(":")[0] +
                              ":" +
                              e?.startAt?.split(":")[1]
                            }
                          />
                        </p>

                        <div>
                          <svg
                            width="11"
                            height="11"
                            viewBox="0 0 136 90"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            className="mt-[6px] mx-2 opacity-50"
                          >
                            <path
                              d="M0.970444 44.6958C0.96311 43.7695 1.14087 42.851 1.49329 41.9942C1.8457 41.1375 2.3657 40.3598 3.02273 39.7067L40.5062 1.98295C41.8387 0.733253 43.6044 0.0495736 45.4311 0.075965C47.2578 0.102356 49.003 0.83676 50.2989 2.12443C51.5948 3.4121 52.3404 5.15255 52.3784 6.97904C52.4165 8.80553 51.7441 10.5755 50.503 11.9161L17.9861 44.6414L50.7114 77.1583C51.9611 78.4909 52.6448 80.2566 52.6184 82.0833C52.592 83.91 51.8576 85.6551 50.5699 86.9511C49.2823 88.247 47.5418 88.9925 45.7153 89.0306C43.8889 89.0687 42.1189 88.3963 40.7783 87.1551L3.05457 49.6717C2.39338 49.0228 1.86842 48.2484 1.51054 47.394C1.15266 46.5395 0.96903 45.6222 0.970444 44.6958Z"
                              fill="#080808"
                            />
                            <path
                              d="M18.4664 44.6391C18.4848 42.7766 19.2297 40.9949 20.5425 39.6737C21.8553 38.3525 23.6322 37.5962 25.4945 37.5659L128.904 37.2354C130.774 37.2294 132.57 37.9666 133.897 39.2846C135.223 40.6026 135.972 42.3936 135.978 44.2636C135.984 46.1335 135.246 47.9293 133.928 49.2557C132.61 50.5822 130.819 51.3308 128.949 51.3368L25.5396 51.6672C23.6771 51.6488 21.8954 50.9038 20.5742 49.591C19.253 48.2782 18.4967 46.5014 18.4664 44.6391Z"
                              fill="#080808"
                            />
                          </svg>
                        </div>

                        <p className="mb-0  text-gray-500 text-sm">
                          <PersianNumber
                            number={
                              e?.endAt?.split(":")[0] +
                              ":" +
                              e?.endAt?.split(":")[1]
                            }
                          />
                        </p>
                      </div>
                    </div>

                    {HasPermission("ManageShifts", permissions) && (
                      <>
                        <div
                          className="w-[30px] h-[30px] bg-secondary-950 rounded-full"
                          onClick={() => goToEditUser(e.id)}
                        >
                          <svg
                            width="13"
                            height="13"
                            viewBox="0 0 18 18"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            className="mx-auto mt-[8px]"
                          >
                            <g clip-path="url(#clip0_72_994)">
                              <path
                                d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
                                stroke="black"
                                stroke-width="1.5"
                              />
                              <path
                                d="M11.4653 2.36397L10.77 3.05922L4.37926 9.44922C3.94651 9.88272 3.72976 10.0995 3.54376 10.338C3.32409 10.6194 3.13573 10.924 2.98201 11.2462C2.85226 11.5192 2.75551 11.8102 2.56201 12.3907L1.74151 14.8515L1.54051 15.453C1.4935 15.5932 1.48652 15.7437 1.52037 15.8877C1.55422 16.0316 1.62755 16.1633 1.73212 16.2679C1.83669 16.3724 1.96835 16.4458 2.1123 16.4796C2.25626 16.5135 2.4068 16.5065 2.54701 16.4595L3.14851 16.2585L5.60926 15.438C6.19051 15.2445 6.48076 15.1477 6.75376 15.018C7.07626 14.8642 7.38076 14.676 7.66201 14.4562C7.90051 14.2702 8.11726 14.0535 8.55001 13.6207L14.9408 7.22997L15.636 6.53472C16.1891 5.98165 16.4998 5.23152 16.4998 4.44935C16.4998 3.66718 16.1891 2.91705 15.636 2.36397C15.0829 1.8109 14.3328 1.50018 13.5506 1.50018C12.7685 1.50018 12.0183 1.8109 11.4653 2.36397Z"
                                stroke="white"
                                stroke-width="1.5"
                              />
                              <g opacity="0.5">
                                <path
                                  d="M10.77white 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
                                  stroke="white"
                                  stroke-width="1.5"
                                />
                                <path
                                  d="M10.77 3.05847C10.77 3.05847 10.857 4.53597 12.1605 5.83947C13.464 7.14297 14.9408 7.22922 14.9408 7.22922M3.14852 16.2585L1.74152 14.85"
                                  stroke="white"
                                  stroke-width="1.5"
                                />
                              </g>
                            </g>
                            <defs>
                              <clipPath id="clip0_72_994">
                                <rect width="18" height="18" fill="white" />
                              </clipPath>
                            </defs>
                          </svg>
                        </div>
                      </>
                    )}
                  </div>
                </div>
              </>
            ))}
        </>
      ) : (
        <NothingFound />
      )}
    </>
  );
};

export default ShiftsEmployees;