import SearchHeaderP from "@/components/icons/SearchHeaderP";
import { Button, Popover, TextField } from "@mui/material";
import { useState } from "react";

function Search() {
  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 (
    <>
      <Button
        className="
      !p-[8px] !border-[#EFEFEF] !rounded-[8px]
      !w-[32px] md:!w-[36px] lg:!w-[40px] dark:!border-[#343645]
      !h-[32px] md:!h-[36px] lg:!h-[40px] md:!hidden
      !min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
      !min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
      "
        variant="outlined"
        onClick={handleClick}
      >
        <SearchHeaderP />
      </Button>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
      >
        <TextField
          size="small"
          placeholder="جستجو کنید.."
          sx={{
            "& .MuiFormLabel-root": {
              top: "-4px !important",
            },
            "& .MuiInputBase-input": { padding: "8px" },
            "& .MuiInputBase-root": { borderRadius: "6px !important" },
            "& .MuiOutlinedInput-notchedOutline": {
              border: "1px solid #E9ECEF !important",
            },
            ".Mui-focused": {
              "& .MuiOutlinedInput-notchedOutline": {
                border: "1px solid #5559CE !important",
                transition: "0.5s all",
              },
            },
            "& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
              {
                display: "none",
              },
          }}
        />
      </Popover>
    </>
  );
}

export default Search;