import React, { FC } from 'react';
import { components } from 'react-select';
import { OptionProps as DefaultOptionProps } from 'react-select/lib/components/Option'; // eslint-disable-line import/no-unresolved
import { Tooltip } from '../../Tooltip';
import { Icon } from '../../Icon';
import { SvgImage } from '../../../assets/images/icons';

export interface OptionType {
  value: any;
  label: any;
}

type OptionProps = {
  icon?: any;
  noIcon?: boolean;
} & DefaultOptionProps<OptionType>;

const defaultIconProps = {
  Asset: SvgImage,
  width: 22,
  height: 22,
  ml: 's',
  mr: '9px',
  color: 'gray.3',
};

export const Option: FC<OptionProps> = ({ children, noIcon, ...props }) => {
  return (
    <components.Option {...props}>
      {(props.data.icon || !noIcon) && (
        <Icon {...{ ...defaultIconProps, ...props.data.icon }} />
      )}
      {children}
      {props.isDisabled && props.selectProps.disabledOptionText && (
        <Tooltip>{props.selectProps.disabledOptionText}</Tooltip>
      )}
    </components.Option>
  );
};
