import React from 'react';
import Icon from 'components/icon';
import { Text } from '@rebass/emotion';

import { ICON_NAMES } from 'utils/constants/assets'

import { CounterProps } from './counter.types';
import * as Styles from './counter.styles';

export default (props: CounterProps): JSX.Element => {
  const isLastItem = props.count === 1;
  const canDecreaseQuantity = (): boolean => !isLastItem;
  const canIncreaseQuantity = (): boolean => props.count < props.max;
  const decreaseQuantity = canDecreaseQuantity() ? props.onDecreaseQuantity : undefined;
  const increaseQuantity = canIncreaseQuantity() ? props.onIncreaseQuantity : undefined;

  return (
    <Styles.Container>
      <Styles.IconWrapper
        isDisabled={!canDecreaseQuantity()}
        onClick={decreaseQuantity}
      >
        <Icon styles={Styles.Icon} iconName={ICON_NAMES.MINUS} />
      </Styles.IconWrapper>
      <Text
        as="span"
        fontSize={1}
        fontWeight={600}
      >
        {props.count}
      </Text>
      <Styles.IconWrapper
        isDisabled={!canIncreaseQuantity()}
        onClick={increaseQuantity}
      >
        <Icon styles={Styles.Icon} iconName={ICON_NAMES.PLUS} />
      </Styles.IconWrapper>
    </Styles.Container>
  );
};