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

storiesOf('Select', module)
   .add('default', () => {
      const items: ISelectItems[] = [
         { name: 'Eren', id: 'Eren' },
         { name: 'Levi', id: 'Levi' },
         { name: 'Rainer', id: 'Rainer' },
         { name: 'Falco', id: 'Falco' },
      ];

      return (
         <View style={{ padding: 10 }}>
            <Form onSubmit={() => {}}>
               <Select name="default" items={items} />
            </Form>
         </View>
      );
   })
   .add('with title', () => {
      const items: ISelectItems[] = [
         { name: 'Eren', id: 'Eren' },
         { name: 'Levi', id: 'Levi' },
         { name: 'Rainer', id: 'Rainer' },
         { name: 'Falco', id: 'Falco' },
      ];
      return (
         <View style={{ padding: 10 }}>
            <Form onSubmit={() => {}}>
               <Select name="default" items={items} title="Characters" />
            </Form>
         </View>
      );
   })
   .add('with initial value', () => {
      const items: ISelectItems[] = [
         { name: 'Eren', id: 'Eren' },
         { name: 'Levi', id: 'Levi' },
         { name: 'Rainer', id: 'Rainer' },
         { name: 'Falco', id: 'Falco' },
      ];
      return (
         <View style={{ padding: 10 }}>
            <Form onSubmit={() => {}} initialData={{ default: 'Falco' }}>
               <Select name="default" items={items} title="Characters" />
            </Form>
         </View>
      );
   })
   .add('with error', () => {
      function Story(): any {
         const items: ISelectItems[] = [
            { name: 'Eren', id: 'Eren' },
            { name: 'Levi', id: 'Levi' },
            { name: 'Rainer', id: 'Rainer' },
            { name: 'Falco', id: 'Falco' },
         ];

         const formRef = useRef(null);

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

         return (
            <View style={{ flex: 1, padding: 20 }}>
               <Form onSubmit={() => {}} ref={formRef}>
                  <Select name="default" items={items} title="Characters" />
               </Form>
            </View>
         );
      }

      return <Story />;
   });
