import React from 'react';
import Button from '../components/parts/Button';
import { UseState } from './helpers'
import Wrap from './Wrap';
import Flex from '../components/layout/Flex';
import ButtonComposer from '../components/composers/ButtonComposer';

export default {
  title: 'Button',
};

export const Variants = () =>
  <UseState
      initialValue={0}
      render={(counter, setCounter) => (
        <Wrap>
          <Flex gap="medium" pad="medium">
          <Button variant="outlined" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
          <Button variant="secondary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
          <Button variant="primary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
          </Flex>
        </Wrap>
      )}
  />

  export const Disabled = () =>
  <UseState
      initialValue={0}
      render={(counter, setCounter) => (
        <Wrap>
          <Flex gap="medium" pad="medium">
          <Button disabled variant="outlined" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
          <Button disabled variant="secondary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
          <Button disabled variant="primary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
          </Flex>
        </Wrap>
      )}
  />

  export const Composer = () =>
  <UseState
      initialValue={0}
      render={(counter, setCounter) => (
        <Wrap>
          <Flex direction="vertical" gap="medium">
            <ButtonComposer  compositionType="gap">
              <Button variant="outlined" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
              <Button variant="secondary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
              <Button variant="primary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
            </ButtonComposer>
            <ButtonComposer compositionType="segmented">
              <Button variant="outlined" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
              <Button variant="secondary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
              <Button variant="primary" onClick={() => setCounter(counter + 1)}>Clicked {counter} times</Button>
            </ButtonComposer>
          </Flex>
        </Wrap>
      )}
  />