"use client";
import React, { useContext, useEffect, useState } from "react";
import "@hassanmojab/react-modern-calendar-datepicker/lib/DatePicker.css";
import DatePicker from "@hassanmojab/react-modern-calendar-datepicker";
import Buttonbriz from "plugins/Buttonbriz/page";
import { Calendar } from "react-modern-calendar-datepicker";
import AppContext from "@ctx/AppContext";

const DatePickerIran = ({
  datePickerEvent,
  date,
  zindex,
  title,
  validator,
  validatorData,
  name,
}) => {
  const CTX = useContext(AppContext);

  const [selectedDay, setSelectedDay] = useState(null);
  const goToEditUser = CTX.state.goToEditUser;

  // useEffect(() => {
  //   if (goToEditUser) {
  //     setSelectedDay(date);
  //   }
  // }, []);

  return (
    <div className="">
      <div
        className={`flex justify-end relative top-[22px] right-3 ltr ${zindex}`}
      >
        <div className="bg-body-100 px-2">
          <p className="mb-0 text-sm mr-0 mx-auto">{title}</p>
        </div>
      </div>

      <DatePicker
        value={date}
        onChange={datePickerEvent}
        shouldHighlightWeekends
        inputClassName={`peer w-full border-b placeholder:text-transparent relative !text-right  ${
          2 == 1 ? "form-control-white" : "form-control"
        }`}
        locale="fa"
        name={name}
      />

      <div className="flex justify-start w-full absolute mt-[-2px]">
        <small className="absolute ">
          {" "}
          {validator ? <>{validatorData}</> : ""}
        </small>
      </div>
    </div>
  );
};

export default DatePickerIran;
