"use client";
import React from "react";
import { ChevronDownIcon } from "lucide-react";
import { SelectTriggerProps as TriggerProps } from "@radix-ui/react-select";
import { PopoverTrigger } from "@/components/ui/popover";
import { useSelectContext } from "@/components/ui/field/select/select.context";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils/cn";

type SelectTriggerProps = TriggerProps & {
    size?: "sm" | "default";
};

export const SelectTrigger: React.FC<SelectTriggerProps> = (props) => {
    const {
        className,
        children,
        size = "default"
    } = props;

    const { open } = useSelectContext();

    return (
         <PopoverTrigger asChild>
             <Button
              className={
                cn(
                    "flex h-auto min-h-9 w-fit items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
                    className
                )
              }
              type="button"
              variant="outline"
              role={props.role ?? "combobox"}
              data-slot="select-trigger"
              data-size={size}
              aria-expanded={props["aria-expanded"] ?? open}>
                {children}
                <ChevronDownIcon className="size-4 shrink-0 opacity-50" />
            </Button>
        </PopoverTrigger>
    );
};