"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 moment from "jalali-moment";
import HasPermission from "plugins/HasPermission/page";
import PersianNumber from "plugins/PersianNumber";

const BottomFilterActivities = ({
  dateQueryFilterValue,
  setDateQueryFilterValue,
  activeStaffId,
  setActiveStaff,
}) => {
  const CTX = useContext(AppContext);

  const handleFilterActivity = (num) => {
    setDateQueryFilterValue(num);
  };

  const handleChangeFilter = () => {
    setActiveStaff(-1);
    CTX.GetUserStaff(dateQueryFilterValue);
    // CTX.GetActivity(null, null, 0, dateQueryFilterValue, activeStaffId);
    CTX.setBottomFilterActivitiesOpen(false);
    CTX.setStopGetActivities(false);
    CTX.setPageGetActivity(0);
  };

  return (
    <BottomSheet
      // onSpringStart={(e) => handleBottomSheetCreateRole(e)}
      open={CTX.state.BottomFilterActivitiesOpen}
      onDismiss={() => CTX.setBottomFilterActivitiesOpen(false)}
      blocking={true}
    >
      <div className="text-center py-2 bg-secondary-950  ">
        <p className="mb-0 text-primary-300 relative top-[-5px]">
          فیلتر اکتیویتی
        </p>
      </div>

      <div className="bg-body-100 p-3 ">
        <div
          className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
            dateQueryFilterValue == 2 ? " bg-primary-100" : "bg-gray-100 "
          }`}
          onClick={() => handleFilterActivity(2)}
        >
          <p className="mb-0 text-right">
            اکتیویتی های دیروز
            <small className="mr-2">
              <PersianNumber
                number={moment()
                  .locale("fa")
                  .subtract(1, "day")
                  .format("D MMMM YYYY")}
                style="mx-1 text-sm !text-gray-600"
              />
            </small>
          </p>
        </div>

        <div
          className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
            dateQueryFilterValue == 1 ? " bg-primary-100" : "bg-gray-100 "
          }`}
          onClick={() => handleFilterActivity(1)}
        >
          <p className="mb-0 text-right">
            اکتیویتی های امروز
            <small className="mr-2">
              <PersianNumber
                number={moment().locale("fa").format("D MMMM YYYY")}
                style="mx-1 text-sm !text-gray-600"
              />
            </small>
          </p>
        </div>

        <div
          className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
            dateQueryFilterValue == 3 ? " bg-primary-100" : "bg-gray-100 "
          }`}
          onClick={() => handleFilterActivity(3)}
        >
          <p className="mb-0 text-right">
            اکتیویتی های فردا
            <small className="mr-2">
              <PersianNumber
                number={moment()
                  .locale("fa")
                  .add(1, "day")
                  .format("D MMMM YYYY")}
                style="mx-1 text-sm !text-gray-600"
              />
            </small>
          </p>
        </div>

        <div
          className={`rounded-xl border-[1px] border-gray-200 p-3 m-2 tr03 ${
            dateQueryFilterValue == 12 ? " bg-primary-100" : "bg-gray-100 "
          }`}
          onClick={() => handleFilterActivity(12)}
        >
          <p className="mb-0 text-right">اکتیویتی های هفته</p>
        </div>

        <Buttonbriz
          title="اعمال فیلتر"
          color="PRIMARY"
          icon="CHECK"
          buttonEvent={() => handleChangeFilter()}
        />
      </div>
    </BottomSheet>
  );
};

export default BottomFilterActivities;