"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 { useLocale, useTranslations } from "next-intl";

const BottomSheetReport = (props) => {
  const CTX = useContext(AppContext);
  const reportDetail = CTX.state.reportDetail;
  const t = useTranslations("BottomSheet");
  const locale = useLocale();
  const isRTL = locale === "fa";

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

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

  return (
    <BottomSheet
      open={CTX.state.BottomSheetReportOpen}
      onDismiss={() => CTX.setBottomSheetReportOpen(false)}
      blocking={true}
    >
      <div className="text-center py-2 bg-secondary-950  ">
        <p className="mb-0 text-primary-300 relative top-[-5px]">
          {" "}
          {t("BottomSheetReportTitle")}{" "}
        </p>
      </div>

      <div className="px-3 pt-10 ">
        <p className="mb-0 text-center text-sm font-light">
          {t("BottomSheetReportDesc")}
        </p>
      </div>

      <div className=" p-4">
        <Buttonbriz
          title={t("BottomSheetReportbutton")}
          color="INFO"
          icon="CHECK"
          buttonEvent={() => {
            if (reportDetail.typeReport == "TASK") {
              handleSendReport_TASK();
            } else if (reportDetail.typeReport == "SHIFTPLAN") {
              handleSendReport_SHIFTPLAN();
            }
          }}
        />
      </div>
    </BottomSheet>
  );
};

export default BottomSheetReport;