'use client';

import * as React from 'react';
import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons';

import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
  Command,
  CommandEmpty,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover';

export default function ComboBox({
  defaultText,
  data,
  value,
  setValue,
  error,
}: {
  defaultText: string;
  data: { label: string; value: string }[];
  value: string;
  setValue: (value: string) => void;
  error?: string;
}) {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            role="combobox"
            aria-expanded={open}
            className="w-full justify-between rounded-sm"
          >
            {value
              ? data?.find((data) => data.value === value)?.label
              : `Select ${defaultText}...`}
            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
          </Button>
        </PopoverTrigger>
        <PopoverContent className=" w-[500px] p-0">
          <Command
          //   filter={(value, search) => {
          //     if (value.includes(search)) return 1;
          //     return 0;
          //   }}
          >
            <CommandInput placeholder="Search framework..." className="h-9" />
            <CommandEmpty>No {defaultText} found.</CommandEmpty>
            <CommandList>
              {data?.map((datas) => (
                <CommandItem
                  key={datas?.value}
                  value={datas?.label}
                  onSelect={(currentValue) => {
                    const value = data?.find(
                      (option) => option.label === currentValue
                    )?.value;

                    setValue(value ?? '');
                    setOpen(false);
                  }}
                >
                  {datas.label}
                  <CheckIcon
                    className={cn(
                      'ml-auto h-4 w-4',
                      value === datas?.value ? 'opacity-100' : 'opacity-0'
                    )}
                  />
                </CommandItem>
              ))}
            </CommandList>
          </Command>
        </PopoverContent>
      </Popover>
      <label className="label">
        <span
          className={`px-1 font-inter text-xs label-text-alt text-red-600  ${
            error ? '' : 'hidden'
          }`}
        >
          {error ? error : undefined}
        </span>
      </label>
    </div>
  );
}