"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 CheckBoxBriz from "plugins/CheckBoxBriz/page";
import Buttonbriz from "plugins/Buttonbriz/page";
import { toast } from "react-toastify";
import PersianNumber from "plugins/PersianNumber";
import moment from "jalali-moment";

const BottomSheetReportManageShift = (props) => {
  const CTX = useContext(AppContext);
  const shiftplansData = CTX.state.shiftPlansData;
  const [shiftplans, setShiftplans] = useState([]);

  // const reportDetail = CTX.state.reportDetail;

  // const handleSendReport_SHIFTPLAN = () => {
  //   CTX.ReportShiftPlan(reportDetail?.shiftId);
  //   CTX.setBottomSheetReportManageShiftOpen(false);
  // };

  // const handleSendReport_TASK = () => {
  //   CTX.ReportTask();
  //   CTX.setBottomSheetReportManageShiftOpen(false);
  // };

  const handleBottomSheetCreateRole = (e) => {
    if (e.type == "OPEN") {
      CTX.GetShifPlans(0, 12);
    }
  };

  const groupObjectsByPlanFor = (responseData) => {
    const groupedData = {};

    // Iterate through the array
    responseData.forEach((obj) => {
      const { planFor } = obj;

      // If the planFor value is not in the groupedData object, create a new array
      if (!groupedData[planFor]) {
        groupedData[planFor] = [obj];
      } else {
        // If the planFor value already exists, push the object into the existing array
        groupedData[planFor].push(obj);
      }
    });

    // Sort the objects within each group by the planFor date
    Object.keys(groupedData).forEach((key) => {
      groupedData[key].sort(
        (a, b) => new Date(a.planFor) - new Date(b.planFor)
      );
    });

    // Convert the groupedData object into an array of objects
    const groupedArray = Object.keys(groupedData).map((key) => ({
      planFor: key,
      data: groupedData[key],
    }));

    // Sort the groupedArray by the planFor date
    groupedArray.sort((a, b) => new Date(a.planFor) - new Date(b.planFor));

    console.log(groupedArray);
    setShiftplans(groupedArray);
  };

  useEffect(() => {
    groupObjectsByPlanFor(shiftplansData);
  }, [shiftplansData]);

  console.log(shiftplans);

  return (
    <BottomSheet
      onSpringStart={(e) => handleBottomSheetCreateRole(e)}
      open={CTX.state.BottomSheetReportManageShiftOpen}
      onDismiss={() => CTX.setBottomSheetReportManageShiftOpen(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="px-3 pt-10 ">
        <p id="MYTEXT" className="mb-0 text-center text-sm font-light">
          {shiftplans?.map((e, index) => (
            <>
              <div className={`h-fit  mb-10`}>
                <div className={`flex justify-between   rtl`}>
                  <div className="flex">
                    <PersianNumber
                      number={moment(e.planFor).format("jYYYY/jM/jD")}
                    />
                  </div>
                </div>

                <>
                  {e.data.map((e) => (
                    <div className=" rtl">
                      <div className="flex justify-between">
                        <div className="ml-2  rounded-xl  ">
                          <p className="text-sm mb-0 text-gray-700 font-medium">
                            {" "}
                            {e.shiftTitle}
                          </p>
                        </div>
                      </div>

                      <div className="flex flex-wrap">
                        {e.users.map((i) => (
                          <div className="flex   p-1 rounded-full w-fit ">
                            <p className="mb-0 text-[12px] font-medium">
                              {i.positionName} :{" "}
                            </p>{" "}
                            <p className="mb-0 text-[12px] mr-1">
                              {i.userFullName}
                            </p>
                          </div>
                        ))}
                        <div className="flex   p-1 rounded-full w-fit ">
                          <p className="mb-0 text-[12px] font-medium text-red-600 ">
                            سوپروایزر :{" "}
                          </p>{" "}
                          <p className="mb-0 text-[12px] mr-1 font-medium  text-red-600  ">
                            {e.supervisorFullName}
                          </p>
                        </div>
                      </div>
                    </div>
                  ))}
                </>
              </div>
            </>
          ))}
        </p>
      </div>

      <div className=" p-4">
        <Buttonbriz
          title="کپی کردن متن "
          color="INFO"
          icon="CHECK"
          buttonEvent={() => {
            var text = document.getElementById("MYTEXT").innerText;
            var elem = document.createElement("textarea");
            document.body.appendChild(elem);
            elem.value = text;
            elem.select();
            document.execCommand("copy");
            document.body.removeChild(elem);
          }}
        />
      </div>
    </BottomSheet>
  );
};

export default BottomSheetReportManageShift;