Vendaweb-portal/components/ui/autocomplete.tsx

import * as React from "react";
import Autocomplete from "@mui/material/Autocomplete";
import TextField from "@mui/material/TextField";
import { cn } from "../../lib/utils";

export interface AutocompleteOption {
  value: string;
  label: string;
}

export interface CustomAutocompleteProps {
  options: AutocompleteOption[];
  value?: string;
  onValueChange?: (value: string) => void;
  placeholder?: string;
  className?: string;
  disabled?: boolean;
  id?: string;
}


const CustomAutocomplete = React.forwardRef<HTMLDivElement, CustomAutocompleteProps>(
  (
    {
      options,
      value,
      onValueChange,
      placeholder = "Selecione uma opção...",
      className,
      disabled,
      id,
    },
    ref
  ) => {
    const selectedOption = options.find((option) => option.value === value) || null;

    const handleChange = (
      _event: React.SyntheticEvent,
      newValue: AutocompleteOption | null
    ) => {
      onValueChange?.(newValue?.value || "");
    };

    return (
      <Autocomplete<AutocompleteOption, false, false, false>
        ref={ref}
        id={id}
        options={options}
        value={selectedOption}
        onChange={handleChange}
        getOptionLabel={(option) => option.label}
        isOptionEqualToValue={(option, value) => option.value === value.value}
        disabled={disabled}
        className={cn("w-full", className)}
        disablePortal
        renderInput={(params) => (
          <TextField
            {...params}
            placeholder={placeholder}
            variant="outlined"
            sx={{
              "& .MuiOutlinedInput-root": {
                height: "40px",
                borderRadius: "12px",
                borderColor: "#cbd5e1",
                backgroundColor: "#ffffff",
                fontSize: "14px",
                color: "#0f172a",
                padding: "0",
                "&:hover": {
                  "& fieldset": {
                    borderColor: "#cbd5e1",
                  },
                },
                "&.Mui-focused": {
                  borderColor: "#002147",
                  boxShadow: "0 0 0 2px rgba(0, 33, 71, 0.1)",
                  "& fieldset": {
                    borderColor: "#002147",
                    borderWidth: "1px",
                  },
                },
                "&.Mui-disabled": {
                  backgroundColor: "#ffffff",
                  opacity: 0.5,
                  cursor: "not-allowed",
                },
                "& fieldset": {
                  borderColor: "#cbd5e1",
                  borderWidth: "1px",
                },
              },
              "& .MuiInputBase-input": {
                padding: "8px 16px",
                fontSize: "14px",
                color: "#0f172a",
                "&::placeholder": {
                  color: "#94a3b8",
                  opacity: 1,
                },
              },
            }}
          />
        )}
        sx={{
          "& .MuiAutocomplete-endAdornment": {
            right: "12px",
          },
          "& .MuiAutocomplete-clearIndicator": {
            color: "#64748b",
            "&:hover": {
              color: "#0f172a",
            },
          },
          "& .MuiAutocomplete-popupIndicator": {
            color: "#64748b",
            "&:hover": {
              color: "#0f172a",
            },
          },
        }}
        componentsProps={{
          popper: {
            sx: {
              "& .MuiAutocomplete-paper": {
                borderRadius: "12px",
                border: "1px solid #e2e8f0",
                boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
                marginTop: "4px",
              },
              "& .MuiAutocomplete-listbox": {
                padding: "4px",
                "& .MuiAutocomplete-option": {
                  borderRadius: "8px",
                  margin: "2px 0",
                  fontSize: "14px",
                  padding: "8px 12px",
                  "&:hover": {
                    backgroundColor: "#f1f5f9",
                  },
                  "&[aria-selected='true']": {
                    backgroundColor: "#f1f5f9",
                    color: "#002147",
                    fontWeight: 600,
                  },
                  "&.Mui-focused": {
                    backgroundColor: "#f1f5f9",
                  },
                },
                "& .MuiAutocomplete-noOptions": {
                  fontSize: "14px",
                  color: "#64748b",
                  padding: "16px",
                  textAlign: "center",
                },
              },
            },
          },
        }}
        noOptionsText="Nenhuma opção encontrada"
      />
    );
  }
);
CustomAutocomplete.displayName = "CustomAutocomplete";

export { CustomAutocomplete };