import React, { useEffect, useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { FormHandles } from '@devesharp/unform-core';
import { Form } from '@devesharp/unform-web';
import styled from 'styled-components';
import { Textarea } from './index';

const css = styled.div;

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

storiesOf('Components/Textarea', module)
   .add('default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Textarea 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">
                  <Textarea title="Input" onInput={setValue} value={value} />
               </div>
            </div>
         </Style>
      );
   })
   .add('title', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Textarea title="Full Name" />
               </div>
            </div>
         </Style>
      );
   })
   .add('textRight', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Textarea value="Text Right" />
               </div>
            </div>
         </Style>
      );
   })
   .add('with type hidden', () => {
      const [value, setValue] = useState('10000');
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Textarea value={value} onInput={setValue} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Textarea error="field invalid" />
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Textarea title="Input" />
                  </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}>
                     <Textarea name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - set data async', () => {
      const formRef = useRef<FormHandles>();

      useEffect(() => {
         formRef.current.setFieldValue('default', undefined);
      }, []);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} ref={formRef}>
                     <Textarea name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
