import { Button } from "@/components/ui/button"
import { Checkbox } from "@/components/ui/checkbox"
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function MultiSelect({
  name,
  options = [],
  value = [],
  onChange,
  placeholder = "Pilih data",
}) {
  const toggle = (val) => {
    let newValue

    if (value.includes(val)) {
      newValue = value.filter((v) => v !== val)
    } else {
      newValue = [...value, val]
    }

    if (onChange) {
      onChange({
        target: {
          name,
          value: newValue,
        },
      })
    }
  }

  const selectedLabels = options
    .filter((o) => value.includes(o.value))
    .map((o) => o.label)
    .join(", ")

  return (
    // <Popover>
    //   <PopoverTrigger asChild>
    //     <Button
    //       variant="outline"
    //       className="w-full justify-start text-left"
    //     >
    //       <div className="flex-1 overflow-x-auto whitespace-nowrap scrollbar-hide">
    //         {value.length > 0 ? selectedLabels : placeholder}
    //       </div>
    //     </Button>
    //   </PopoverTrigger>

    //   <PopoverContent className="w-full">
    //     <div className="space-y-2">
    //       {options.map((opt) => (
    //         <label
    //           key={opt.value}
    //           className="flex items-center space-x-2"
    //         >
    //           <Checkbox
    //             checked={value.includes(opt.value)}
    //             onCheckedChange={() => toggle(opt.value)}
    //           />
    //           <span>{opt.label}</span>
    //         </label>
    //       ))}
    //     </div>
    //   </PopoverContent>
    // </Popover>
    <Popover>
        <PopoverTrigger asChild>
            <Button
            variant="outline"
            className="w-full justify-start text-left font-normal border-gray-300 rounded-md px-2 shadow-none"
            >
            <div className="flex-1 overflow-x-auto whitespace-nowrap scrollbar-hide">
                {value.length > 0 ? selectedLabels : placeholder}
            </div>
            </Button>
        </PopoverTrigger>

        <PopoverContent
            side="bottom"
            align="start"
            sideOffset={4}
            className="w-[var(--radix-popover-trigger-width)] max-h-60 overflow-y-auto z-50"
        >
            <div className="space-y-2">
            {options.map((opt) => (
                <label
                key={opt.value}
                className="flex items-center space-x-2"
                >
                <Checkbox
                    checked={value.includes(opt.value)}
                    onCheckedChange={() => toggle(opt.value)}
                />
                <span>{opt.label}</span>
                </label>
            ))}
            </div>
        </PopoverContent>
    </Popover>
  )
}