import { createListCollection, Portal, Select } from '@ark-ui/react';
import { ScrollArea } from '@mantine/core';
import { FC, useState } from 'react';
import { UseFormRegisterReturn } from 'react-hook-form';
import { twx } from '../utils';

export type Option = { label: string; value: string };

interface FilterBooleanPickerProps {
  className?: string;
  value?: string[];
  defaultValue?: string[];
  options: Option[];
  onSelect?: (option: Option[]) => void;
  placeholder?: string;
  allowClear?: boolean;
  register?: UseFormRegisterReturn;
  multiple?: boolean;
  sameWidth?: boolean;
  suffixIcon?: string;
  scrollAreaClassName?: string;
}

export const CSelect: FC<FilterBooleanPickerProps> = ({
  className,
  options,
  onSelect,
  register,
  placeholder = 'Select',
  allowClear = true,
  multiple = false,
  sameWidth = true,
  value,
  defaultValue,
  suffixIcon,
  scrollAreaClassName,
}) => {
  const [highlighted, setHighlighted] = useState<Option | null>(null);

  const collection = createListCollection({
    items: options,
  });
  return (
    <div>
      <Select.Root
        collection={collection}
        value={value}
        defaultValue={defaultValue}
        className={twx('h-full w-full', className)}
        positioning={{ sameWidth }}
        onValueChange={(e) => {
          onSelect?.(e.items);
        }}
        onHighlightChange={({ highlightedItem }) => {
          setHighlighted(highlightedItem);
        }}
        multiple={multiple}
      >
        <Select.Control className="relative h-full w-full">
          <Select.Trigger className="h-full min-w-0 w-full flex cursor-pointer items-center border-1 border-zinc-200 rounded bg-white p-2 text-sm outline-none dark:bg-zinc-900 focus:bg-white data-[placeholder-shown]:text-black/50 dark:focus:bg-zinc-800 dark:data-[placeholder-shown]:text-white/50">
            <Select.ValueText
              className="flex flex-1 items-center"
              placeholder={placeholder}
            />
            <Select.Indicator>
              {suffixIcon ? (
                <div className="flex items-center justify-center">
                  <div className={suffixIcon} />
                </div>
              ) : (
                <div className="h-5 w-5 p-1">
                  <div className="i-ant-design-down-outlined pointer-events-none h-full w-full cursor-pointer text-black/80 dark:text-white/80 hover:text-black/60 hover:dark:text-white/60" />
                </div>
              )}
            </Select.Indicator>
          </Select.Trigger>
          {allowClear && (
            <Select.ClearTrigger asChild>
              <div className="absolute bottom-0 right-4 top-0 flex items-center py-2 pr-2">
                <div className="relative h-5 w-5 p-1">
                  <div className="i-ant-design-close-outlined h-full w-full cursor-pointer text-black/80 dark:text-white/80 hover:text-black/60 hover:dark:text-white/60" />
                </div>
              </div>
            </Select.ClearTrigger>
          )}
        </Select.Control>
        <Portal>
          <Select.Positioner>
            <Select.Content className="relative z-90 overflow-auto border-1 border-gray-400 rounded-lg bg-white shadow-md dark:border-zinc-800 dark:bg-zinc-900">
              <ScrollArea className={twx(scrollAreaClassName)}>
                {options.map((option) => (
                  <Select.Item
                    key={option.value}
                    item={option}
                    className={twx([
                      'flex cursor-pointer items-center justify-between px-4 py-2 hover:backdrop-brightness-90 dark:hover:backdrop-brightness-110 gap-8',
                      highlighted == option &&
                        'backdrop-brightness-90 dark:backdrop-brightness-110',
                      'text-black/80 dark:text-white/80',
                    ])}
                  >
                    <Select.ItemText>{option.label}</Select.ItemText>
                    <Select.ItemIndicator>✓</Select.ItemIndicator>
                  </Select.Item>
                ))}
              </ScrollArea>
            </Select.Content>
          </Select.Positioner>
        </Portal>
        <Select.HiddenSelect {...register} />
      </Select.Root>
    </div>
  );
};
