import React, { ReactElement } from 'react';

import Icon from '../Icon';
import Button from '../Button';
import {
  StyledSuffixIconWrapper,
  StyledLoadingIconWrapper,
} from './StyledSelect';

interface SuffixIconProps {
  loading?: boolean;
  onChange?: (value?: string | number) => void;
  open: boolean;
  removeShown?: boolean;
}

const SuffixIcon = ({
  loading,
  onChange,
  open,
  removeShown,
}: SuffixIconProps): ReactElement => (
  <StyledSuffixIconWrapper>
    {loading === true && (
      <StyledLoadingIconWrapper>
        <Icon
          data-test-id="loading-icon"
          icon="loading"
          intent="subdued-text"
          spin
        />
      </StyledLoadingIconWrapper>
    )}
    {removeShown === true ? (
      <Button.Icon
        data-test-id="remove-icon"
        intent="subdued-text"
        icon="circle-cancel"
        onClick={(): void => {
          onChange?.(undefined);
        }}
        style={{ fontSize: 'inherit' }}
      />
    ) : (
      <Icon
        data-test-id="arrow-icon"
        icon={open === true ? 'arrow-up' : 'arrow-down'}
        intent="subdued-text"
      />
    )}
  </StyledSuffixIconWrapper>
);

export default SuffixIcon;