web/plugins/BottomSheet/BottomSheetCreateShifts.jsx

"use client";

import React, { useContext, useEffect, useRef, useState } from "react";
import { BottomSheet } from "react-spring-bottom-sheet";
import Input from "plugins/Input/page";
import AppContext from "@ctx/AppContext";
import SimpleReactValidator from "simple-react-validator";
import { toast } from "react-toastify";
import Buttonbriz from "plugins/Buttonbriz/page";

const BottomSheetCreateShifts = (props) => {
  const CTX = useContext(AppContext);
  const [title, setTitle] = useState("");
  const [description, setDescription] = useState("");
  const [dayOfWeeksCurrent, setDayOfWeeksCurrent] = useState("");
  const [routineId, setRoutineId] = useState([]);
  const [routineIdSelectData, setRoutineIdSelectData] = useState("");

  const [, forceUpdate] = useState();

  const dayOfWeeksChoose = CTX.state.dayOfWeeksChoose;
  const startAtTimeShift = CTX.state.startAtTimeShift;
  const endAtTimeShift = CTX.state.endAtTimeShift;
  const goToEditShift = CTX.state.goToEditShift;
  const idEditShift = CTX.state.idEditShift;
  const shiftData = CTX.state.shiftData;
  const routinesData = CTX.state.routinesData;

  const validator = useRef(
    new SimpleReactValidator({
      messages: {
        required: "پر کردن این فیلد الزامی میباشد",
      },
      element: (message) => (
        <>
          <div className="text-right px-1 ">
            <small className="text-red-600 t-ig-small  ">{message}</small>
          </div>
        </>
      ),
    })
  );

  const week = [
    { key: "شنبه", value: 6 },
    { key: "یکشنبه", value: 0 },
    { key: "دوشنبه", value: 1 },
    { key: "سه شنبه", value: 2 },
    { key: "چهار شنبه", value: 3 },
    { key: "پنج شنبه", value: 4 },
    { key: "جمعه", value: 5 },
  ];

  const clear = () => {
    setDayOfWeeksCurrent("");
    setDescription("");
    setTitle("");
    setRoutineId([]);
    CTX.setEndAtTimeShift(["00", "00"]);
    CTX.setStartAtTimeShift(["00", "00"]);
    CTX.setDayOfWeeksChoose([]);
  };

  const body = {
    title,
    description,
    endAt: endAtTimeShift[0] + ":" + endAtTimeShift[1] + ":00",
    startAt: startAtTimeShift[0] + ":" + startAtTimeShift[1] + ":00",
    dayOfWeeks: dayOfWeeksChoose,
    routines: routineId,
  };

  const bodyUpdate = {
    title,
    description,
    endAt: endAtTimeShift[0] + ":" + endAtTimeShift[1] + ":00",
    startAt: startAtTimeShift[0] + ":" + startAtTimeShift[1] + ":00",
    dayOfWeeks: dayOfWeeksChoose,
    id: shiftData.id,
    routines: routineId,
  };
  const handleCreateShift = (update) => {
    if (validator.current.allValid()) {
      if (update == "UPDATE") {
        CTX.UpdateShift(bodyUpdate);
      } else {
        CTX.CreateShift(body);
      }
    } else {
      toast.error("پرکردن همه ی فیلد ها واجب است", {
        position: "bottom-right",
        autoClose: 2000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });

      validator.current.showMessages();
      forceUpdate(1);
    }
  };

  const handleBottomSheetCreateShift = (e) => {
    setRoutineIdSelectData(
      routinesData.map((item) => ({
        key: item.name,
        value: item.id,
      }))
    );

    if (e.type == "OPEN") {
      if (goToEditShift) {
        CTX.GetShift(idEditShift);
      }
    } else if (e.type == "CLOSE") {
      CTX.setGoToEditShift(false);
      CTX.setIdEditShift(null);
      CTX.setShiftData([]);
      // clear();
    }
  };

  const deleteRole = (value) => {
    CTX.setDayOfWeeksChoose(dayOfWeeksChoose.filter((el) => el !== value));
  };

  useEffect(() => {
    if (goToEditShift) {
      setTitle(shiftData.title);
      setDescription(shiftData.description);
      CTX.setStartAtTimeShift([
        shiftData.startAt.split(":")[0],
        shiftData.startAt.split(":")[1],
      ]);
      CTX.setEndAtTimeShift([
        shiftData.endAt.split(":")[0],
        shiftData.endAt.split(":")[1],
      ]);
      setRoutineId(shiftData.routines.map((item) => item.routineId));

      CTX.setDayOfWeeksChoose(shiftData.days);
    }
  }, [shiftData]);

  return (
    <BottomSheet
      onSpringStart={(e) => handleBottomSheetCreateShift(e)}
      open={CTX.state.BottomSheetCreateShiftsOpen}
      onDismiss={() => CTX.setBottomSheetCreateShiftsOpen(false)}
      blocking={false}
    >
      <div className="text-center py-2 bg-primary-300  ">
        <p className="mb-0 text-white relative top-[-5px]">
          افزودن شیفت کاری جدید
        </p>
      </div>

      <div className="bg-body-100 p-4 ">
        <div className="">
          <Input
            lable="نام شیفت مورد نظر"
            id="title-id"
            name="title"
            type={"text"}
            value={title}
            inputEvent={(e) => {
              setTitle(e.target.value);
              validator.current.showMessageFor("title");
            }}
            style="text-right"
            validator={true}
            validatorData={validator.current.message(
              "title",
              title,
              "required"
            )}
          />
        </div>

        <div className="">
          <Input
            lable=" ساعت شروع شیفت"
            id="startAtTimeShift-id"
            name="startAtTimeShift"
            type={"text"}
            value={startAtTimeShift[0] + ":" + startAtTimeShift[1]}
            inputEvent={(e) => {
              validator.current.showMessageFor("startAt");
            }}
            inputFocus={(e) => {
              if (goToEditShift) {
                toast.error("ویرایش ساعت ممکن نیست", {
                  position: "bottom-right",
                  closeOnClick: true,
                });
              } else {
                CTX.setOpenTimePicker(true);
                CTX.setBottomSheetCreateShiftsOpen(false);
                CTX.setTimePickerOrder("CREATE-SHIFT-START");
                e.preventDefault();
              }
            }}
            style="text-right"
            validator={true}
            validatorData={validator.current.message(
              "startAtTimeShift",
              startAtTimeShift,
              "required"
            )}
            readOnly={true}
          />
        </div>

        <div className="">
          <Input
            lable=" ساعت پایان شیفت"
            id="endAtTimeShift-id"
            name="endAtTimeShift"
            type={"text"}
            value={endAtTimeShift[0] + ":" + endAtTimeShift[1]}
            inputEvent={(e) => {
              validator.current.showMessageFor("startAt");
            }}
            inputFocus={(e) => {
              if (goToEditShift) {
                toast.error("ویرایش ساعت ممکن نیست", {
                  position: "bottom-right",
                  closeOnClick: true,
                });
              } else {
                CTX.setOpenTimePicker(true);
                CTX.setBottomSheetCreateShiftsOpen(false);
                CTX.setTimePickerOrder("CREATE-SHIFT-END");
                e.preventDefault();
              }
            }}
            style="text-right"
            validator={true}
            validatorData={validator.current.message(
              "endAtTimeShift",
              endAtTimeShift,
              "required"
            )}
            readOnly={true}
          />
        </div>

        <div className="">
          <Input
            lable="انتخاب روزهای این شیفت در هفته"
            id="dayOfWeeksCurrent-id"
            name="dayOfWeeksCurrent"
            type={"text"}
            value={dayOfWeeksCurrent}
            inputEvent={(e) => {
              setDayOfWeeksCurrent(e.target.value);

              if (!!dayOfWeeksChoose.find((b) => b == e.target.value)) {
                toast.error("روز  تکراری است", {
                  position: "bottom-right",
                  closeOnClick: true,
                });
              } else {
                CTX.setDayOfWeeksChoose((current) => [
                  ...current,
                  parseInt(e.target.value),
                ]);
              }
            }}
            style="text-right"
            select={true}
            selectData={[
              { key: "شنبه", value: parseInt(6) },
              { key: "یکشنبه", value: 0 },
              { key: "دوشنبه", value: 1 },
              { key: "سه شنبه", value: 2 },
              { key: "چهار شنبه", value: 3 },
              { key: "پنج شنبه", value: 4 },
              { key: "جمعه", value: 5 },
            ]}
            defaultValue={"انتخاب کنید"}
          />
        </div>
        <div className="flex flex-wrap mt-3 rtl">
          {dayOfWeeksChoose &&
            dayOfWeeksChoose.map((e) => (
              <div className="flex bg-gray-300 p-1 rounded-full m-1 justify-start">
                <div
                  className="w-[30px] h-[30px] rounded-full bg-gray-400 "
                  onClick={() => deleteRole(e)}
                ></div>

                <div>
                  <p className="mb-0 px-3 text-sm mt-1">
                    {week?.find((b) => b.value == e).key}
                  </p>
                </div>
              </div>
            ))}
        </div>
        <div className="">
          <Input
            lable="روتین شیفت"
            id="routineId-id"
            name="routineId"
            type={"text"}
            inputEvent={(e) => {
              setRoutineId([e.target.value]);
            }}
            style="text-right"
            validatorData={validator.current.message(
              "routineId",
              routineId[0],
              "required"
            )}
            select={true}
            selectData={routineIdSelectData}
            defaultValue={"انتخاب کنید"}
          />
        </div>

        <div className="flex flex-wrap mt-3 rtl">
          <div className="flex bg-gray-300 p-1 rounded-full m-1 justify-start">
            <div>
              <p className="mb-0 px-3 text-sm mt-1">
                {routinesData?.find((b) => b.id == routineId[0])?.name}
              </p>
            </div>
          </div>
        </div>

        <div className="">
          <Input
            lable=" توضیحات"
            id="description-id"
            name="description"
            type={"text"}
            value={description}
            inputEvent={(e) => {
              setDescription(e.target.value);
              validator.current.showMessageFor("description");
            }}
            textarea={true}
            style="text-right"
          />
        </div>
        {goToEditShift ? (
          <Buttonbriz
            title="ویرایش شیفت"
            color="INFO"
            icon="CHECK"
            buttonEvent={() => handleCreateShift("UPDATE")}
            subButton={true}
            subButtonTitle="حذف شیفت"
            subButtonEvent={() => CTX.DeleteShift(idEditShift)}
          />
        ) : (
          <Buttonbriz
            title="ثبت شیفت"
            color="PRIMARY"
            icon="CHECK"
            buttonEvent={() => handleCreateShift()}
          />
        )}
      </div>
    </BottomSheet>
  );
};

export default BottomSheetCreateShifts;