import React from 'react';
import PropTypes from 'prop-types';

import Button, {BUTTON_TYPE} from '@propellerads/button';
import {
  ArrowPageFirst,
  ArrowPageLast,
  ArrowLeft,
  ArrowRight,
  COLOR,
} from '@propellerads/icon';

import {StyledArrowButton} from './style.jsx';

export const ARROW_TYPE = {
  FIRST: 'first',
  PREVIOUS: 'previous',
  NEXT: 'next',
  LAST: 'last',
};

const ICONS = {
  [ARROW_TYPE.FIRST]: ArrowPageFirst,
  [ARROW_TYPE.PREVIOUS]: ArrowLeft,
  [ARROW_TYPE.NEXT]: ArrowRight,
  [ARROW_TYPE.LAST]: ArrowPageLast,
};

const ArrowButton = (props) => {
  const {
    type,
    ...buttonProps
  } = props;

  const CurrentIcon = ICONS[type];

  return (
    <StyledArrowButton>
      <Button
        type={BUTTON_TYPE.PLAIN}
        {...buttonProps}
      >
        <CurrentIcon
          hoverColor={COLOR.BLUE}
          color={COLOR.GRAY}
        />
      </Button>
    </StyledArrowButton>
  );
};

ArrowButton.propTypes = {
  type: PropTypes.oneOf(Object.values(ARROW_TYPE)).isRequired,
  isDisabled: PropTypes.bool,
  elementId: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

ArrowButton.defaultProps = {
  isDisabled: false,
};

export default ArrowButton;