import SearchD from "@/components/icons/SearchD";
import { Autocomplete, TextField, Button, ButtonGroup } from "@mui/material";
import { useState } from "react";

function SmSearch({ placeholder, handleSearch, data }) {
  const [inputValue, setInputValue] = useState("");
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <ButtonGroup
      variant="contained"
      className="!bg-[#FFF] !w-full lg:!w-2/3 !mt-[15px] !rounded-lg !overflow-hidden 
        flex items-center !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
        !h-fit !p-1"
    >
      <Autocomplete
        freeSolo
        options={data}
        getOptionLabel={(option) => option.name}
        inputValue={inputValue}
        className="!w-full"
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
          handleSearch(newInputValue);
        }}
        onChange={(event, newValue) => {
          setSelectedOption(newValue);
          handleSearch(newValue ? newValue.name : "");
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            variant="standard"
            placeholder={placeholder}
            dir="rtl"
            InputProps={{
              ...params.InputProps,
              disableUnderline: true,
              style: { height: "100%" },
            }}
            sx={{
              background: "transparent !important",
              "& .MuiInputBase-input": {
                background: "#FAFAFA",
                color: "#6C757D",
                padding: "0 16px",
                fontSize: "14px",
                fontFamily: "inherit",
              },
            }}
            className="!shadow-none !w-full !px-5 !h-full !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal"
          />
        )}
      />
      <Button
        onClick={() => handleSearch(inputValue)}
        className="
          !rounded-[4px] !gap-2.5 !p-2 md:!p-3 lg:!p-4
          !w-[38px] sm:!w-[44px] md:!w-[50px] lg:!w-[56px] 
          !h-[38px] sm:!h-[44px] md:!h-[50px] lg:!h-[56px] 
          !min-w-[38px] sm:!min-w-[44px] md:!min-w-[50px] lg:!min-w-[56px] 
          !min-h-[38px] sm:!min-h-[44px] md:!min-h-[50px] lg:!min-h-[56px] 
        "
      >
        <SearchD />
      </Button>
    </ButtonGroup>
  );
}

export default SmSearch;