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

storiesOf('ButtonsGroup', module)
   .add('default', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <>
            <View style={{ padding: 10 }}>
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} />
               </Form>
            </View>
         </>
      );
   })
   .add('title', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <>
            <View style={{ padding: 10 }}>
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" />
               </Form>
            </View>
         </>
      );
   })
   .add('allowEmpty', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <>
            <View style={{ padding: 10 }}>
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" allowEmpty />
               </Form>
            </View>
         </>
      );
   })
   .add('multiple selection', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <>
            <View style={{ padding: 10 }}>
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" multiSelection />
               </Form>
            </View>
         </>
      );
   })
   .add('with initial value', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <>
            <View style={{ padding: 10 }}>
               <Form onSubmit={() => {}} initialData={{ default: 'Rainer' }}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" multiSelection />
               </Form>
            </View>
         </>
      );
   })
   .add('with initial value multiSelection', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <>
            <View style={{ padding: 10 }}>
               <Form onSubmit={() => {}} initialData={{ default: ['Rainer', 'Falco'] }}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" multiSelection />
               </Form>
            </View>
         </>
      );
   })
   .add('with error', () => {
      function Stub(): any {
         const buttons = [
            { name: 'Eren', value: 'Eren' },
            { name: 'Levi', value: 'Levi' },
            { name: 'Rainer', value: 'Rainer' },
            { name: 'Falco', value: 'Falco' },
         ];

         const formRef = useRef<any>();

         useEffect(() => {
            formRef.current.setFieldError('default', 'Field Invalid');
         }, []);

         return (
            <>
               <View style={{ padding: 10 }}>
                  <Form onSubmit={() => {}} initialData={{ default: ['Rainer', 'Falco'] }} ref={formRef}>
                     <ButtonsGroup name="default" options={buttons} title="Characters" multiSelection />
                  </Form>
               </View>
            </>
         );
      }

      return <Stub />;
   });
