import { cx } from "@karma/cva";
import { ChevronDownIcon } from "@karma/icon";
import * as SelectPrimitive from "@radix-ui/react-select";
import * as React from "react";

export type SelectTriggerProps = React.ComponentPropsWithoutRef<
  typeof SelectPrimitive.Trigger
> & {
  variant?: "primary" | "accent" | "outline" | "muted";
  darkIcon?: boolean;
  icon?: React.ReactNode;
};

export const SelectTrigger = React.forwardRef<
  React.ElementRef<typeof SelectPrimitive.Trigger>,
  SelectTriggerProps
>(
  (
    {
      className,
      children,
      variant = "primary",
      darkIcon = false,
      icon,
      ...props
    },
    ref,
  ) => (
    <SelectPrimitive.Trigger
      ref={ref}
      className={cx(
        "flex h-10 w-full items-center justify-between rounded-md px-3 py-2 text-sm ring-offset-background focus:outline-0 focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
        {
          "hover:bg-accent/90 bg-accent text-secondary": variant === "accent",
          "hover:bg-background/90 bg-background text-primary":
            variant === "primary",
          "border border-accent text-primary hover:bg-accent hover:text-background":
            variant === "outline",
          "hover:bg-muted/80 bg-muted text-secondary": variant === "muted",
        },
        className,
      )}
      {...props}
    >
      {children}
      {icon ? (
        icon
      ) : (
        <SelectPrimitive.Icon asChild>
          <ChevronDownIcon
            className={cx("opacity-1 h-1.5", darkIcon && "text-primary")}
          />
        </SelectPrimitive.Icon>
      )}
    </SelectPrimitive.Trigger>
  ),
);
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;