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

import RadioGroup, {THEME} from '../../Components/RadioGroup/src';
import radioGroupNote from '../../Components/RadioGroup/README.md';

import {
  Eye, Touch, SIZE, COLOR,
} from '../../Components/Icon/src';
import Hint from '../../Components/Hint/src';

const baseOptions = [
  {
    id: '1',
    key: '1',
    label: 'OnClick',
    value: '1',
    tooltip: '',
  }, {
    id: '2',
    key: '2',
    label: 'Push Notification',
    value: '2',
    tooltip: 'Push Notification - progressive ad. format',
    hint: <Hint message="Push Notification - progressive ad. format" />,
  },
];

const iconOptions = [
  {
    id: '1',
    key: '1',
    label: <Eye size={SIZE.SMALL} color={COLOR.GRAY_DARK} />,
    value: '1',
    tooltip: '',
  }, {
    id: '2',
    key: '2',
    label: <Touch size={SIZE.SMALL} color={COLOR.GRAY_DARK} />,
    value: '2',
    tooltip: 'Push Notification - progressive ad. format',
    hint: <Hint message="Push Notification - progressive ad. format" />,
  },
];

export default storiesOf('Components | RadioGroup', module)
  .add('RadioGroup', () => {
    const [activeState, setActiveState] = useState(baseOptions[0].value);

    return (
      <RadioGroup
        options={baseOptions}
        isDisabled={boolean('Disabled', false)}
        onChange={setActiveState}
        errors={array('Errors', ['Errors'])}
        activeState={activeState}
        theme={select('Theme', Object.values(THEME))}
        primaryColor={text('Primary color (hex, hsl, gradient, etc)', '#7d32e1')}
      />
    );
  }, {
    notes: radioGroupNote,
  })
  .add('Icons in tabs', () => {
    const [activeState, setActiveState] = useState(iconOptions[0].value);

    return (
      <RadioGroup
        options={iconOptions}
        isDisabled={boolean('Disabled', false)}
        onChange={setActiveState}
        errors={array('Errors', ['Errors'])}
        activeState={activeState}
        theme={THEME.TAB}
      />
    );
  })
  .add('Slider tabs', () => {
    const [activeState, setActiveState] = useState(baseOptions[0].value);

    return (
      <RadioGroup
        options={baseOptions}
        isDisabled={boolean('Disabled', false)}
        onChange={setActiveState}
        errors={undefined}
        activeState={activeState}
        theme={THEME.SLIDER}
      />
    );
  });