import { useState } from "react";
import { Button, Popover } from "@mui/material";
import DatePickerContent from "./DatePickerContent";

function PopoverDate({ text, updateDate, type }) {
  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>
      <Button
        onClick={handleClick}
        className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E] dark:!text-[#A1A1A1]  !text-[16px] !font-normal !w-[115px]"
      >
        {text}
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "right",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "right",
        }}
        sx={{
          "& .MuiPaper-root": {
            background: "transparent !important",
            border: "none !important",
          },
        }}
      >
        <DatePickerContent
          type={type}
          updateDate={updateDate}
          handleClose={handleClose}
        />
      </Popover>
    </div>
  );
}

export default PopoverDate;