import React from 'react';
import { Select, Checkbox, Tag } from 'antd';
import type { SelectProps } from 'antd/es/select';
import type { DefaultOptionType } from 'antd/es/select';
import type { CustomTagProps } from 'rc-select/lib/BaseSelect';

const { Option } = Select;

interface SearchableSelectProps {
  options: Array<{ keys?: string; value: number | string; label: string }>;
  onSelect?: (
    value: string | number | null | undefined,
    option: DefaultOptionType | DefaultOptionType[]
  ) => void;
  isSearchable?: boolean;
  defaultValue?: { value: number | string; label: string };
  value?: any;
  placeholder?: string;
  allowClear?: boolean;
  [key: string]: unknown;
}

const SelectDropdown: React.FC<
  SearchableSelectProps & SelectProps<any>
> = ({
  onSearch,
  options,
  onSelect,
  defaultValue,
  value,
  isSearchable = false,
  placeholder,
  allowClear = true,
  ...selectProps
}) => {
  const isMultiple =
    selectProps.mode === 'multiple' || selectProps.mode === 'tags';

  const selectedValues = Array.isArray(value) ? value : [];

  const tagRender = isMultiple
    ? (tagProps: CustomTagProps) => {
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        const { label: _label, value: tagValue, disabled: _disabled, ...passProps } = tagProps;
        const option = options?.find((opt) => opt.value === tagValue);
        return (
          <Tag
            {...passProps}
            style={{
              marginRight: 3,
              backgroundColor: '#e6e6e6',
              color: 'rgba(0,0,0,0.88)',
              borderColor: '#c8c8c8',
              fontSize: '90%',
            }}
          >
            {option?.label ?? String(tagValue)}
          </Tag>
        );
      }
    : undefined;

  return (
    <Select<any>
      showSearch={isSearchable}
      allowClear={allowClear}
      defaultValue={defaultValue}
      menuItemSelectedIcon={null}
      value={value}
      placeholder={placeholder}
      onSearch={onSearch}
      tagRender={tagRender}
      filterOption={(input, option) => {
        const label = String((option as any)?.label ?? '');
        return label.toLowerCase().includes(input.toLowerCase());
      }}
      onChange={(val, option) => {
        if (onSelect) {
          const selectedOption = Array.isArray(option)
            ? option[0]
            : option;
          onSelect(val, selectedOption as DefaultOptionType);
        }
      }}
      {...selectProps}
    >
      {options?.map((item) => {
        const isChecked = selectedValues.includes(item.value);

        return (
          <Option
            key={item?.keys ? item?.keys : item.value}
            value={item.value}
            label={item.label}
          >
            {isMultiple ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <Checkbox checked={isChecked} />
                <span>{item.label}</span>
              </div>
            ) : (
              item.label
            )}
          </Option>
        );
      })}
    </Select>
  );
};

export default SelectDropdown;