import {
  extendVariants,
  Select as NextUiSelect,
  SelectProps
} from '@heroui/react';
interface ISelectProps extends SelectProps {}
const NextSelect = extendVariants(NextUiSelect, {
  defaultVariants: {
    variant: 'underlined'
  }
});

const Select: React.FC<ISelectProps> = ({ children, ...rest }) => {
  return (
    <NextSelect
      {...rest}
      ref={(rest.ref as any) || null}
      classNames={{
        ...rest.classNames,
        trigger: [
          'border-b-1 border-primary-200 hover:border-primary-800',
          'dark:border-white dark:hover:border-white',
          'after:bottom-0 after:h-[1px] after:bg-primary-800 dark:after:bg-white',
          rest.isInvalid
            ? 'after:!bg-danger !border-b-danger hover:!border-danger'
            : '',
          rest.classNames?.trigger
        ].join(' '),

        label: [
          'text-lg text-primary-500 dark:text-white opacity-60 mt-2',
          'line-clamp-1 pr-6 text-left',
          rest.classNames?.label
        ].join(' '),

        selectorIcon: [
          '-mr-4',
          'stoke-primary-100 storke-white',
          'size-8 mt-3',
          'stroke-1',
          rest.isInvalid ? 'text-danger' : ' text-primary-300 dark:text-white',
          rest.classNames?.selectorIcon
        ].join(' '),
        value: ['text-medium', rest.classNames?.value].join(' '),
        listbox: ['p-0', rest.classNames?.listbox].join(' '),

        popoverContent: [
          'p-0 rounded-none',
          rest.classNames?.popoverContent
        ].join(' ')
      }}>
      {children}
    </NextSelect>
  );
};

export default Select;
