import { twJoin } from "tailwind-merge";

import type { AutocompleteProps } from "./Autocomplete";
import { paperStyles } from "../menu/paperStyles";

export function useAutocompleteStyles({
  height,
}: Pick<AutocompleteProps, "height">) {
  const classes = {
    inputRoot: "!pl-6 !pr-[48px] py-6",
    input: twJoin(
      "placeholder:text-N60 min-w-[100px]",
      height === "40" ? "pl-6 pr-6 py-4" : "pl-2 pr-2 py-0"
    ),
    endAdornment: twJoin(
      "right-2",
      height === "40" ? "top-[7px]" : "top-[1px] mt-2"
    ),
    popupIndicator: "transform-none",
    clearIndicator: "mr-24",
    listbox: "p-0",
    paper: twJoin(paperStyles, "max-w-[unset] mt-4"),
    option: twJoin(
      "items-start rounded-6 p-8 text-style-R200 hover:bg-N20 [&.Mui-focused]:bg-N20",
      "aria-selected:bg-transparent aria-selected:hover:bg-N20 aria-selected:[&.Mui-focused]:bg-N20"
    ),
    tag: "m-0",
    noOptions: "p-8 text-N700 text-style-R200",
  };

  return classes;
}
