import React, {useState} from 'react';
import {storiesOf} from '@storybook/react';
import {action} from '@storybook/addon-actions';
import {boolean, text} from '@storybook/addon-knobs';
import InputCheckbox from '@propellerads/input-checkbox';

import inputCheckboxNote from '../../Components/InputCheckbox/README.md';

export default storiesOf('Components | InputCheckbox', module)
  .add('default view', () => {
    const [isChecked, setChecked] = useState(false);

    return (
      <InputCheckbox
        onChange={(value) => setChecked(value)}
        elementId="InputCheckbox"
        label={(
          <span>
            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
            <a href="#" onClick={action('click')}>Hi, bro</a>
            {' '}
            i am clickable
          </span>
                )}
        description={text('Description', 'Input Checkbox description')}
        isDisabled={boolean('Disabled', false)}
        isChecked={isChecked}
        hasError={boolean('Has error', false)}
      />
    );
  }, {
    notes: inputCheckboxNote,
  });