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 { InputPure } from '.';
import InputStyle from './Input.style';

const css = styled.div;

const Style = css`
   background: white !important;
`;

storiesOf('Components/PureForms/Input', module)
   .add('default', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" />
            </InputStyle>
         </Style>
      );
   })
   .add('prefix with JSX', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" prefix={<i className="fas fa-user" />} />
            </InputStyle>
         </Style>
      );
   })
   .add('prefix with text', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" prefix="R$" />
            </InputStyle>
         </Style>
      );
   })
   .add('suffix with JSX', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" suffix={<i className="fas fa-user" />} />
            </InputStyle>
         </Style>
      );
   })
   .add('suffix with text', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" suffix="R$" />
            </InputStyle>
         </Style>
      );
   })
   .add('title', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" title="Full Name" />
            </InputStyle>
         </Style>
      );
   })
   .add('textRight', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" textRight />
            </InputStyle>
         </Style>
      );
   })
   .add('with number', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" number />
            </InputStyle>
         </Style>
      );
   })
   .add('with number decimals', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" number decimals={4} />
            </InputStyle>
         </Style>
      );
   })
   .add('with CEP', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" CEP />
            </InputStyle>
         </Style>
      );
   })
   .add('with CNPJ', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" CNPJ />
            </InputStyle>
         </Style>
      );
   })
   .add('with CPF', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" CPF />
            </InputStyle>
         </Style>
      );
   })
   .add('with RG', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" RG />
            </InputStyle>
         </Style>
      );
   })
   .add('with phone', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" phone />
            </InputStyle>
            <InputStyle>
               <InputPure name="number11Digits" phone />
            </InputStyle>
         </Style>
      );
   })
   .add('no spaces', () => {
      return (
         <Style>
            <InputStyle>
               <InputPure name="default" noSpaces />
            </InputStyle>
         </Style>
      );
   })
   .add('with error', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <InputStyle>
               <InputPure name="default" number decimals={2} />
            </InputStyle>
         </Style>
      );
   });
