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 { Input } from '.';

const css = styled.div;

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

storiesOf('Components/Forms/Input', module)
   .add('default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Input name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('prefix with JSX', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Input name="default" prefix={<i className="fas fa-user" />} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('prefix with text', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Input name="default" prefix="R$" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with JSX', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Input name="default" suffix={<i className="fas fa-user" />} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with text', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Input name="default" suffix="R$" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('title', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Input name="default" title="Full Name" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('textRight', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: 'text-right' }}>
                     <Input name="default" textRight />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with number', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
                     <Input name="default" number />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with number decimals', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
                     <Input name="default" number decimals={4} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with CEP', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '08871220' }}>
                     <Input name="default" CEP />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with CNPJ', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
                     <Input name="default" CNPJ />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with CPF', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
                     <Input name="default" CPF />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with RG', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '461273317' }}>
                     <Input name="default" RG />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with phone', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '1188881234', number11Digits: '11988881234' }}>
                     <Input name="default" phone />
                     <Input name="number11Digits" phone />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('no spaces', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
                     <Input name="default" noSpaces />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }} ref={formRef}>
                     <Input name="default" number decimals={2} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
