import React, { useEffect, useReducer, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import styled from 'styled-components';
import { CheckboxPure } from '.';
import Style from './Checkbox.style';

storiesOf('Components/PureForms/CheckboxPure', module)
   .add('default', () => {
      return (
         <Style>
            <CheckboxPure name="default" title="Checkbox" />
         </Style>
      );
   })
   .add('with color', () => {
      return (
         <Style>
            <CheckboxPure name="checkbox" title="Checkbox" color="red" />
         </Style>
      );
   })
   .add('with object value', () => {
      return (
         <Style color="red">
            <CheckboxPure name="checkbox" title="Checkbox" />
            <CheckboxPure name="checkbox" title="Checkbox" />
         </Style>
      );
   })
   .add('with object value async', () => {
      return (
         <Style>
            <CheckboxPure name="checkbox" title="Checkbox" color="red" value={{ id: 1 }} />
         </Style>
      );
   })
   .add('with error', () => {
      return (
         <Style>
            <CheckboxPure name="checkbox" title="Checkbox" color="red" value={{ id: 1 }} />
         </Style>
      );
   })
   .add('with disabled', () => {
      return (
         <Style>
            <CheckboxPure name="checkbox" title="Checkbox" color="red" value={{ id: 1 }} disabled />
         </Style>
      );
   });
