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

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

storiesOf('ToggleSwitch', module).add('Primary', () => {
  const [switch1, setSwitch1] = useState(false);
  const [switch2, setSwitch2] = useState(true);

  const args1 = {
    id: 'first',
    disabled: false,
    handleClick : () => {      
      setSwitch1(!switch1);
      
      return;
    },
    checked: switch1,
  };
  
  const args2 = {
    id: 'second',
    disabled: false,
    handleClick : () => {      
      setSwitch2(!switch2);
      
      return;
    },
    checked: switch2,
  };

  return (
  <>
    <ToggleSwitch {...args1} />
    <div style={{ marginTop: '20px'}}>
      <ToggleSwitch {...args2} />
    </div>
  </>
  )
});

storiesOf('ToggleSwitch', module).add('Disabled', () => {

  const args1 = {
    id: 'first',
    disabled: true,
    handleClick : () => {      
      return;
    },
    checked: false,
  };
  
  const args2 = {
    id: 'second',
    disabled: true,
    handleClick : () => {
      return;
    },
    checked: true,
  };

  return (
  <>
    <ToggleSwitch {...args1} /> 
    <div style={{ marginTop: '20px'}}>
      <ToggleSwitch {...args2} />
    </div>
  </>
  )
});