import CalendarEdit from "@/components/icons/CalendarEdit";
import { convertToJalali } from "@/helper";
import { Button, Popover } from "@mui/material";
import { DatePicker } from "jalaali-react-date-picker";
import React, { useState } from "react";

function DateBirthday({ data, changeData }) {
  const [anchorEl, setAnchorEl] = useState(null);

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

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  return (
    <div className="w-full">
      <div
        className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
        onClick={handleClick}
      >
        <p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
          {data.value}
        </p>
        <Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
          <CalendarEdit />
        </Button>
      </div>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        sx={{
          "& .MuiPaper-root": {
            padding: "12px",
            background: "#FAFAFA !important",
            borderRadius: "16px",
            border: "1px solid #E9ECEF",
            boxShadow: "0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)",
          },
        }}
      >
        <DatePicker
          locale="fa"
          onChange={(e) => {
            changeData(convertToJalali(e._d), "value", "date_of_birth");
            handleClose();
          }}
        />
      </Popover>
    </div>
  );
}

export default DateBirthday;