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

import Button, {BUTTON_TYPE, BUTTON_SIZE} from '../../Components/Button/src';
import {showTooltip, hideTooltip, TOOLTIP_POSITION} from '../../Components/SmartTooltip/src';
import smartTooltipNote from '../../Components/SmartTooltip/README.md';

export default storiesOf('Components | SmartTooltip', module)
  .add('Button with SmartTooltip', () => (
    <>
      {Object.values(BUTTON_TYPE)
        .map((buttonType, idx) => (
          <Button
            onClick={() => action('onChangePromise')}
            elementId={`${buttonType}_${idx}`}
            type={buttonType}
            isDisabled={boolean('Disabled', false)}
            isFullWidth={boolean('Full width', false)}
            isLoading={boolean('Loading', false)}
            size={select('Size', Object.values(BUTTON_SIZE), BUTTON_SIZE.DEFAULT)}
            onMouseEnter={(e) => showTooltip(e.target, 'Smart Message')}
            onMouseLeave={hideTooltip}
          >
            {buttonType}
          </Button>
        ))}
    </>
  ), {notes: smartTooltipNote})
  .add('Button with SmartTooltip on the right position', () => (
    <Button
      onChangePromise={() => Promise.resolve()
        .then(action('onChangePromise'))}
      elementId={text('elementId', 'primaryButton')}
      type={select('Type', Object.values(BUTTON_TYPE), BUTTON_TYPE.PRIMARY)}
      isDisabled={boolean('Disabled', false)}
      isBig={boolean('Big', false)}
      isLoading={boolean('Loading', false)}
      onMouseEnter={(e) => showTooltip(e.target, 'Smart Message', TOOLTIP_POSITION.RIGHT)}
      onMouseLeave={hideTooltip}
    >
      Primary button
    </Button>
  ));