import React, { useEffect, useRef, useState } from 'react';
import { View } from 'react-native';
import { storiesOf } from '@storybook/react-native';
import { Form } from '@unform/mobile';
import { Checkbox } from '.';

storiesOf('Checkbox', module)
   .add('default', () => {
      return (
         <View style={{ padding: 10 }}>
            <Form onSubmit={() => {}}>
               <Checkbox name="default" title="Checkbox" />
            </Form>
         </View>
      );
   })
   .add('with error', () => {
      function Component(): any {
         const formRef = useRef<any>();

         useEffect(() => {
            formRef.current.setFieldError('checkbox', 'Field is required');
         }, []);

         return (
            <View style={{ padding: 10 }}>
               <Form onSubmit={() => {}} initialData={{ checkbox: { id: 2 } }} ref={formRef}>
                  <Checkbox name="checkbox" title="Checkbox" color="red" value={{ id: 1 }} />
               </Form>
            </View>
         );
      }

      return <Component />;
   });
