import { ChevronUp } from '@transferwise/icons';
import { IconSize } from '@transferwise/icons/lib/types';
import { clsx } from 'clsx';

import {
  Size,
  Position,
  PositionTop,
  PositionBottom,
  PositionRight,
  PositionLeft,
  SizeExtraSmall,
  SizeSmall,
  SizeMedium,
} from '../common';

const CONTAINER_SIZE = {
  [Size.EXTRA_SMALL]: 10,
  [Size.SMALL]: 16,
  [Size.MEDIUM]: 24,
};

export interface ChevronProps {
  orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;
  size?: SizeExtraSmall | SizeSmall | SizeMedium;
  disabled?: boolean;
  className?: string;
}

export interface ExtraSmallChevronProps {
  className?: string;
}

const ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {
  return (
    <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role="presentation" aria-hidden>
      <svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" focusable="false">
        <path
          fillRule="evenodd"
          d="M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z"
        />
      </svg>
    </span>
  );
};

const Chevron = ({
  orientation = Position.BOTTOM,
  size = Size.SMALL,
  disabled = false,
  className,
}: ChevronProps) => {
  const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);

  if (size === Size.EXTRA_SMALL) {
    return <ExtraSmallChevron className={classNameValue} />;
  }

  const sizeValue = CONTAINER_SIZE[size] as IconSize;

  return <ChevronUp className={classNameValue} size={sizeValue} />;
};

export default Chevron;