import React, { useEffect, useRef, useState } from 'react';
import { faSearch, faUser } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@unform/core';
import { Form } from '@unform/web';
import styled from 'styled-components';
import { AppProvider } from '../AppProvider';
import { LoaderIcon } from '../LoaderIcon';
import { maskValue } from '../MaskText/mask.utils';
import { FormStyle } from '../styles';
import { CustomComponentInput } from './__mocks__/InputCustom';
import { ICustomInputProps, Input, ViewPasswordToggle } from './index';

const css = styled.div;

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

storiesOf('Components/Input', module)
   .add('default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input title="Input" />
               </div>
            </div>
         </Style>
      );
   })
   .add('default with state', () => {
      const [value, setValue] = useState('default text');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input title="Input" onInput={setValue} value={value} />
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with async', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }} ref={formRef}>
                     <Input
                        name="default"
                        onChange={(ev) => {
                           console.log('sdsd', ev.target.value);
                        }}
                        onInput={(ev) => {
                           console.log('input', ev);
                        }}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('prefix with JSX', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input prefix={<FontAwesomeIcon icon={faUser} />} />
               </div>
            </div>
         </Style>
      );
   })
   .add('prefix with text', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input prefix="R$" />
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with JSX', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input suffix={<FontAwesomeIcon icon={faSearch} />} />
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with text', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input suffix="m³" />
               </div>
            </div>
         </Style>
      );
   })
   .add('suffix with loading', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input loading />
               </div>
            </div>
         </Style>
      );
   })
   .add('title', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input title="Full Name" />
               </div>
            </div>
         </Style>
      );
   })
   .add('textRight', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input textRight value="Text Right" />
               </div>
            </div>
         </Style>
      );
   })
   .add('with number', () => {
      const [value, setValue] = useState(100.1023);
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="number" value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with number decimals', () => {
      const [value, setValue] = useState('10000');
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="number" decimals={4} value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with CEP', () => {
      const [value, setValue] = useState('08871220');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="CEP" value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with CNPJ', () => {
      const [value, setValue] = useState('26576255000191');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="CNPJ" value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with CPF', () => {
      const [value, setValue] = useState('26576255000191');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="CPF" value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with RG', () => {
      const [value, setValue] = useState('461273317');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="RG" value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with phone', () => {
      const [value, setValue] = useState('1188881234');
      const [value2, setValue2] = useState('11988881234');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="phone" value={value} onInput={setValue} />
                  <Input mask="phone" value={value2} onInput={setValue2} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with password', () => {
      const [value, setValue] = useState('1188881234');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="phone" value={value} onInput={setValue} password />
               </div>
            </div>
         </Style>
      );
   })
   .add('no spaces', () => {
      const [value, setValue] = useState(' email @simple. com. br');

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="no-spaces" value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with type hidden', () => {
      const [value, setValue] = useState('10000');
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input mask="number" value={value} onInput={setValue} type="hidden" />
               </div>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Input error="field invalid" />
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Input name="name1" title="Input" />
                     <Input name="name2" title="Input" />
                     <Input name="name3" title="Input" />
                     <Input name="name4" title="Input" />
                     <Input name="name5" title="Input" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with number', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={(data) => console.log(data)} initialData={{ default: '10000' }}>
                     <Input mask="number" name="default" />
                     <button>asdasd</button>
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with number decimals', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '10000' }}>
                     <Input mask="number" decimals={4} name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with CEP', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '08871220' }}>
                     <Input mask="CEP" name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with CNPJ', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
                     <Input mask="CNPJ" name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with CPF', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '26576255000191' }}>
                     <Input mask="CPF" name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with RG', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '461273317' }}>
                     <Input mask="RG" name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with phone', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: '1188881234', number11Digits: '11988881234' }}>
                     <Input mask="phone" name="default" />
                     <Input mask="phone" name="number11Digits" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - no spaces', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ default: ' email @simple. com. br' }}>
                     <Input mask="no-spaces" name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - 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" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with CustomComponent', () => {
      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" title="Custom Input" CustomComponent={CustomComponentInput} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with CustomComponent in AppProvider', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <AppProvider initialData={{ customComponents: { Input: CustomComponentInput } }}>
                     <Input title="Custom Input" />
                  </AppProvider>
               </div>
            </div>
         </Style>
      );
   });
