import { useState } from "react";

import { convertToJalali } from "@/helper";
import EditField from "@/app/component/fields/EditField";
import ButtonDate from "@/app/component/ButtonDate";
import CalendarPD from "@/components/icons/CalendarPD";
import ContentText from "@/app/component/ContentText";

function FieldDate({ changeListData, data }) {
  const [anchorEl, setAnchorEl] = useState(null);
  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  const updateDate = (newDate) => {
    const jalaliDate = newDate
      ? convertToJalali(newDate)
      : "تاریخ مد نظر پیدا نشد...";
    changeListData(jalaliDate, "value", "time_work");
  };

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  return (
    <ContentText text="زمان شروع به کار">
      <ButtonDate
        setAnchorEl={setAnchorEl}
        updateDate={updateDate}
        anchorEl={anchorEl}
        open={open}
        id={id}
      >
        <div className="relative w-full">
          <EditField
            placeholder="انتخاب کنید..."
            changeData={changeListData}
            data={data}
            icon={<CalendarPD />}
            isTransparent={true}
            iconGray={true}
            name="time_work"
          />
          <span
            className="absolute left-0 top-0 w-full h-full bg-transparent z-10 cursor-pointer"
            onClick={handleClick}
          ></span>
        </div>
      </ButtonDate>
    </ContentText>
  );
}

export default FieldDate;