import React from 'react';
import { storiesOf } from '@storybook/react';
import { checkA11y } from 'storybook-addon-a11y';
import { withInfo } from '@storybook/addon-info';
import { withKnobs, boolean } from '@storybook/addon-knobs/react';
import { Store, State } from '@sambego/storybook-state';
import { Checkbox, Link, TextBody } from '../components';

const sizes = ['small', 'medium', 'large'];

const store = new Store({
  checked: false,
});

const handleOnChange = checked => {
  store.set({ checked });
};

storiesOf('Checkboxes', module)
  .addDecorator((story, context) => withInfo('common info')(story)(context))
  .addDecorator(checkA11y)
  .addDecorator(withKnobs)
  .add('sizes', () => (
    <div>
      {sizes.map((size, key) => (
        <State store={store} key={key}>
          <Checkbox size={size} marginVertical={3} onChange={handleOnChange} disabled={boolean('Disabled', false)}/>
        </State>
      ))}
    </div>
  ))
  .add('with labels', () => (
    <div>
      {sizes.map((size, key) => (
        <State store={store} key={key}>
          <Checkbox size={size} marginVertical={3} onChange={handleOnChange} disabled={boolean('Disabled', false)} label={`I'm a ${size} Checkbox`}/>
        </State>
      ))}
    </div>
  ))
  .add('with link in label', () => (
    <div>
      <State store={store}>
        <Checkbox marginVertical={3} onChange={handleOnChange} disabled={boolean('Disabled', false)}>
          <TextBody>I'm a medium label with a <Link href="#" inherit={false}>link</Link> inside</TextBody>
        </Checkbox>
      </State>
    </div>
  ));

@@ -193,16 +193,30 @@
  boolean
+, select, text
  %7D from 
@@ -251,65 +251,8 @@
 t';%0A
-import %7B Store, State %7D from '@sambego/storybook-state';%0A
 impo
@@ -355,123 +355,8 @@
 %5D;%0A%0A
-const store = new Store(%7B%0A  checked: false,%0A%7D);%0A%0Aconst handleOnChange = checked =%3E %7B%0A  store.set(%7B checked %7D);%0A%7D;%0A%0A
 stor
@@ -522,21 +522,23 @@
   .add('
-sizes
+Default
 ', () =%3E
@@ -549,163 +549,64 @@
    %3C
-div%3E%0A      %7Bsizes.map((size, key) =%3E (%0A        %3CState store=%7Bstore%7D key=%7Bkey%7D%3E%0A          %3CCheckbox size=%7Bsize%7D marginVertical=%7B3%7D onChange=%7BhandleOnChange%7D
+Checkbox%0A      checked=%7Bboolean('Checked', false)%7D%0A     
  dis
@@ -643,354 +643,105 @@
 se)%7D
-/%3E
 %0A      
-  %3C/State%3E%0A      ))%7D%0A    %3C/div%3E%0A  ))%0A  .add('with l
+label=%7Btext('L
 abel
-s
 ', 
-() =%3E (%0A    %3Cdiv%3E%0A      %7Bsizes.map((size, key) =%3E (%0A        %3CState store=%7Bstore%7D key=%7Bkey%7D%3E%0A          %3CCheckbox size=%7Bsize%7D marginVertical=%7B3%7D onChange=%7BhandleOnChange%7D disabled=%7Bboolean('Disabled', false)%7D label=%7B%60I'm a $%7Bsize%7D Checkbox%60%7D/%3E%0A        %3C/State%3E%0A      )
+'I am the label')%7D%0A      size=%7Bselect('Size', sizes, 'medium'
 )%7D%0A    
-%3C/div
+/
 %3E%0A  
@@ -751,17 +751,17 @@
   .add('
-w
+W
 ith link
@@ -789,103 +789,64 @@
    %3C
-div%3E%0A      %3CState store=%7Bstore%7D%3E%0A        %3CCheckbox marginVertical=%7B3%7D onChange=%7BhandleOnChange%7D
+Checkbox%0A      checked=%7Bboolean('Checked', false)%7D%0A     
  dis
@@ -879,22 +879,68 @@
  false)%7D
-%3E
 %0A    
+  size=%7Bselect('Size', sizes, 'medium')%7D%0A    %3E%0A
       %3CT
@@ -1034,20 +1034,16 @@
 xtBody%3E%0A
-    
     %3C/Ch
@@ -1054,34 +1054,8 @@
 ox%3E%0A
-      %3C/State%3E%0A    %3C/div%3E%0A
   ))

implement Knobs and simplify stories