import React from 'react';
import {storiesOf} from '@storybook/react';

import RadioCardGroup, {RADIO_CARD_GROUP_THEME} from '../../Components/RadioCardGroup/src/index';
import {showTooltip, hideTooltip} from '../../Components/SmartTooltip/src';
import radioCardGroupOptions from './mocks.js';
import {Question, SIZE, COLOR} from '../../Components/Icon/src';

export default storiesOf('Components | RadioCardGroup', module)
  .add('RadioCardGroup default', () => {
    const [value, setValue] = React.useState(2);

    return (
      <RadioCardGroup
        options={radioCardGroupOptions}
        value={value}
        onChange={(option) => setValue(option.value)}
      />
    );
  })
  .add('RadioCardGroup without default value', () => {
    const [value, setValue] = React.useState(undefined);

    return (
      <RadioCardGroup
        value={value}
        options={radioCardGroupOptions}
        onChange={(option) => setValue(option.value)}
      />
    );
  })
  .add('RadioCardGroup HORIZONTAL theme', () => {
    const [value, setValue] = React.useState(undefined);

    return (
      <RadioCardGroup
        options={radioCardGroupOptions}
        value={value}
        onChange={(option) => setValue(option.value)}
        theme={RADIO_CARD_GROUP_THEME.HORIZONTAL}
      />
    );
  })
  .add('RadioCardGroup HORIZONTAL with label only', () => {
    const [value, setValue] = React.useState(2);

    const options = radioCardGroupOptions.map((option) => {
      const newOption = {...option};

      delete newOption.description;
      delete newOption.tooltipMessage;

      newOption.additionalContent = (
        <Question
          size={SIZE.SMALL}
          color={COLOR.GRAY_DARK}
          onMouseEnter={(e) => {
            showTooltip(e.target, `Tooltip for ${newOption.value}`);
          }}
          onMouseLeave={hideTooltip}
        />
      );

      return newOption;
    });

    return (
      <RadioCardGroup
        value={value}
        options={options}
        onChange={(option) => setValue(option.value)}
        theme={RADIO_CARD_GROUP_THEME.HORIZONTAL}
      />
    );
  });