"use client";

import AppContext from "@ctx/AppContext";
import Buttonbriz from "plugins/Buttonbriz/page";
import PersianNumber from "plugins/PersianNumber";
import { useState, useEffect, useRef, useContext } from "react";

const TimePicker = () => {
  const CTX = useContext(AppContext);

  const [hureSelect, setHureSelect] = useState("00");
  const [secondSelect, setSecondSelect] = useState("00");
  const [time, setTime] = useState(["00", "00"]);
  const hoursArray = Array.from({ length: 24 }, (_, index) => {
    const formattedHour = index < 10 ? `0${index}` : `${index}`;
    return formattedHour;
  });
  const secondsArray = Array.from({ length: 60 }, (_, index) => {
    const formattedSecond = index < 10 ? `0${index}` : `${index}`;
    return formattedSecond;
  });

  const handleButtonTimePicker = () => {
    if (CTX.state.TimePickerOrder === "CREATE-SHIFT-START") {
      CTX.setBottomSheetCreateShiftsOpen(true);
      CTX.setStartAtTimeShift(time);
      CTX.setOpenTimePicker(false);
    }
    if (CTX.state.TimePickerOrder === "CREATE-SHIFT-END") {
      CTX.setBottomSheetCreateShiftsOpen(true);
      CTX.setEndAtTimeShift(time);
      CTX.setOpenTimePicker(false);
    }
  };

  const handleHureSelect = (e) => {
    setHureSelect(e);
    setTime([e, secondSelect]);
  };

  const handleSecondSelect = (e) => {
    setSecondSelect(e);
    setTime([hureSelect, e]);
  };

  return (
    <div className="fixed w-full  top-0 z-[120]">
      <div className="bg-BigPlus h-screen content-center ">
        <div className="flex justify-center">
          <div className="mx-5 ">
            <h2 className="mb-0 text-white text-lg font-bold py-2 text-center ">
              ساعت
            </h2>
            <div className="bg-gray-800 h-[400px] w-[100px] rounded-full  overflow-auto">
              {hoursArray.map((e) => (
                <div
                  className={` p-2 text-center tr03  ${
                    hureSelect == e ? "bg-primary-300 " : "bg-transparent"
                  }`}
                  onClick={() => handleHureSelect(e)}
                >
                  <p className="mb-0 font-bold text-white text">
                    <PersianNumber number={e} size={60} />
                  </p>
                </div>
              ))}
            </div>
          </div>

          <div className="mx-5 ">
            <h2 className="mb-0 text-white text-lg font-bold py-2 text-center ">
              دقیقه{" "}
            </h2>
            <div className="bg-gray-800 h-[400px] w-[100px] rounded-full  overflow-auto">
              {secondsArray.map((e) => (
                <div
                  className={` p-2 text-center tr03  ${
                    secondSelect == e ? "bg-primary-300 " : "bg-transparent"
                  }`}
                  onClick={() => handleSecondSelect(e)}
                >
                  <p className="mb-0 font-bold text-white text">
                    <PersianNumber number={e} size={60} />
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="flex justify-center mt-10">
          <p className="mb-0 flex text-[50px] text-white ">
            <PersianNumber
              number={time[0]}
              style="!text-[70px] font-bold mt-[26px] mx-3"
            />
            :
            <PersianNumber
              number={time[1]}
              style="!text-[70px] font-bold mt-[26px] mx-3"
            />
          </p>
        </div>

        <div className="p-3 fixed bottom-0 w-full">
          <Buttonbriz
            title="ثبت زمان"
            color="INFO"
            icon="CHECK"
            buttonEvent={() => handleButtonTimePicker()}
          />
        </div>
      </div>
    </div>
  );
};

export default TimePicker;