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

import { Checkbox } from '../src';

storiesOf('Checkbox', module).add('Square', () => {
  function Parent({ children }) {
    const [selected, setSelected] = useState(false);

    return <div>{children(selected, setSelected)}</div>;
  }

  return (
    <Parent>
      {(selected, setSelected) => (
        <Checkbox
          shape="square"
          isChecked={selected}
          handleClick={() => {
            if (selected) setSelected(false);
            else setSelected(true);
          }}
        />
      )}
    </Parent>
  );
});

storiesOf('Checkbox', module).add('Round', () => {
  function Parent({ children }) {
    const [selected, setSelected] = useState(false);

    return <div>{children(selected, setSelected)}</div>;
  }

  return (
    <Parent>
      {(selected, setSelected) => (
        <Checkbox
          shape="round"
          isChecked={selected}
          handleClick={() => {
            if (selected) setSelected(false);
            else setSelected(true);
          }}
        />
      )}
    </Parent>
  );
});