import React from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {boolean} from '@storybook/addon-knobs';

import ArrowButton, {ARROW_TYPE} from '../../Components/ArrowButton';

export default storiesOf('Components | Arrow Button', module)
  .add('default', () => (
    <>
      <ArrowButton
        type={ARROW_TYPE.FIRST}
        isDisabled={boolean(`Disabled ${ARROW_TYPE.FIRST}`, false)}
        elementId="arrow-button-first"
        onClick={action(`Clicked ${ARROW_TYPE.FIRST}`)}
      />
      <ArrowButton
        type={ARROW_TYPE.PREVIOUS}
        isDisabled={boolean(`Disabled ${ARROW_TYPE.PREVIOUS}`, false)}
        elementId="arrow-button-previous"
        onClick={action(`Clicked ${ARROW_TYPE.PREVIOUS}`)}
      />
      <ArrowButton
        type={ARROW_TYPE.NEXT}
        isDisabled={boolean(`Disabled ${ARROW_TYPE.NEXT}`, false)}
        elementId="arrow-button-next"
        onClick={action(`Clicked ${ARROW_TYPE.NEXT}`)}
      />
      <ArrowButton
        type={ARROW_TYPE.LAST}
        isDisabled={boolean(`Disabled ${ARROW_TYPE.LAST}`, false)}
        elementId="arrow-button-last"
        onClick={action(`Clicked ${ARROW_TYPE.LAST}`)}
      />
    </>
  ));