import { cn } from "@/utils/class-merge";
import { FlagIcon as FlagIconSolid } from "@heroicons/react/20/solid";
import { DropdownPassThroughMethodOptions, DropdownPassThroughOptions } from "primereact/dropdown";

export const DropdownStyles: DropdownPassThroughOptions = {
  root: ({ props }: DropdownPassThroughMethodOptions) => ({
    className: cn(
      "cursor-pointer inline-flex relative select-none mb-2",
      "bg-white border border-gray-400 transition-colors duration-200 ease-in-out rounded-md",
      "w-full md:w-56",
      "hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] ",
      { "opacity-60 select-none pointer-events-none cursor-default": props.disabled }
    ),
  }),
  input: ({ props }: DropdownPassThroughMethodOptions) => ({
    className: cn(
      "cursor-pointer flex flex-auto overflow-hidden overflow-ellipsis whitespace-nowrap relative",
      "bg-transparent border-0 text-gray-800",
      "p-3 transition duration-200 bg-transparent rounded appearance-none font-sans text-base",
      "focus:outline-none focus:shadow-none",
      { "pr-7": props.showClear }
    ),
  }),
  trigger: {
    className: cn(
      "flex items-center justify-center shrink-0",
      "bg-transparent text-gray-500 w-12 rounded-tr-lg rounded-br-lg"
    ),
  },
  wrapper: {
    className: cn("max-h-[200px] overflow-auto", "bg-white text-gray-700 border-0 rounded-md shadow-lg", " "),
  },
  list: { className: "py-3 list-none m-0" },
  item: ({ context }: DropdownPassThroughMethodOptions) => ({
    className: cn(
      "cursor-pointer font-normal overflow-hidden relative whitespace-nowrap",
      "m-0 p-3 border-0  transition-shadow duration-200 rounded-none",
      "hover:text-gray-700 hover:bg-gray-200",
      {
        "text-gray-700": !context.focused && !context.selected,
        "bg-gray-300 text-gray-700  ": context.focused && !context.selected,
        "bg-[rgba(251,194,199,0.7)] text-black  ": context.focused && context.selected,
        "bg-blue-50 text-gray-700": !context.focused && context.selected,
        "opacity-60 select-none pointer-events-none cursor-default": context.disabled,
      }
    ),
  }),
  itemGroup: {
    className: cn("m-0 p-3 text-gray-800 bg-white font-bold", " ", "cursor-auto"),
  },
  header: {
    className: cn("p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg"),
  },
  filterContainer: {
    className: "relative",
  },
  filterInput: {
    className: cn(
      "pr-7 -mr-7",
      "w-full",
      "font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none",
      "hover:border-[rgba(251,194,199,0.7)] focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(251,194,199,1)] "
    ),
  },
  filterIcon: { className: "-mt-2 absolute top-1/2" },
  clearIcon: { className: "text-gray-500 right-12 -mt-2 absolute top-1/2" },
};

export const selectedPriorityTemplate = (option: { label: string; value: number }) => {
  return (
    <div class="flex items-center">
      <FlagIconSolid
        className={cn(
          "mr-2 size-4",
          { "text-[rgba(18,26,230,0.29)]": option.value == 1 },
          { "text-[rgba(97,200,232,0.6)]": option.value == 2 },
          {
            "text-[rgba(247,220,52,0.61)]": option.value == 3,
          },
          { "text-[rgba(251,194,199,0.53)]": option.value == 4 }
        )}
      />
      <span>{option.label}</span>
    </div>
  );
};
