import React, { useEffect, useRef } from 'react';
import { View, Button } from 'react-native';
import { faUserAlt } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { storiesOf } from '@storybook/react-native';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/mobile';

import { Input } from '.';

storiesOf('Input', module)
   .add('default', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}}>
               <Input name="default" />
            </Form>
         </View>
      );
   })
   .add('title', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}}>
               <Input name="default" title="Title" />
            </Form>
         </View>
      );
   })
   .add('prefix with text', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}}>
               <Input name="default" title="Title" prefix="sdsd" />
            </Form>
         </View>
      );
   })
   .add('prefix with JSX', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}}>
               <Input name="default" title="Title" prefix={<FontAwesomeIcon icon={faUserAlt} />} />
            </Form>
         </View>
      );
   })
   .add('suffix with text', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}}>
               <Input name="default" title="Title" suffix="sdsd" />
            </Form>
         </View>
      );
   })
   .add('suffix with JSX', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}}>
               <Input name="default" title="Title" suffix={<FontAwesomeIcon icon={faUserAlt} />} />
            </Form>
         </View>
      );
   })
   .add('textRight', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: 'text-right' }}>
               <Input name="default" textRight />
            </Form>
         </View>
      );
   })
   .add('with number', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
               <Input name="default" number />
            </Form>
         </View>
      );
   })
   .add('with number decimals', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
               <Input name="default" number decimals={4} />
            </Form>
         </View>
      );
   })
   .add('with CEP', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: '08871220' }}>
               <Input name="default" CEP />
            </Form>
         </View>
      );
   })
   .add('with CNPJ', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
               <Input name="default" CNPJ />
            </Form>
         </View>
      );
   })
   .add('with CPF', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
               <Input name="default" CPF />
            </Form>
         </View>
      );
   })
   .add('with RG', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: '461273317' }}>
               <Input name="default" RG />
            </Form>
         </View>
      );
   })
   .add('with phone', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: '1188881234', number11Digits: '11988881234' }}>
               <Input name="default" phone />
               <Input name="number11Digits" phone />
            </Form>
         </View>
      );
   })
   .add('no spaces', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
               <Input name="default" noSpaces />
            </Form>
         </View>
      );
   })
   .add('with error', () => {
      function Story(): any {
         const formRef = useRef(null);

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

         return (
            <View style={{ flex: 1, padding: 20 }}>
               <Form onSubmit={() => {}} initialData={{ default: '10000' }} ref={formRef}>
                  <Input name="default" title="Title" />
               </Form>
            </View>
         );
      }

      return <Story />;
   })
   .add('with password', () => {
      return (
         <View style={{ flex: 1, padding: 20 }}>
            <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
               <Input name="default" password />
            </Form>
         </View>
      );
   });
