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

const css = styled.div;

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

storiesOf('Components/Forms/Textarea', module)
   .add('default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Textarea name="default" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with title', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Textarea name="default" title="Description" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with disabled', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Textarea name="default" title="Description" disabled />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} ref={formRef}>
                     <Textarea name="default" title="Description" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with minRows', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Textarea name="default" title="Description" minRows={10} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with maxRows', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form
                     onSubmit={() => {}}
                     initialData={{
                        default:
                           'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit non diam mollis pharetra. Morbi sit amet felis vel dui malesuada gravida. Fusce pulvinar vulputate cursus. Phasellus nec aliquam nibh, vel posuere erat. Ut eu faucibus mi, ac tempor velit. Aliquam diam diam, fermentum sed turpis quis, vulputate consequat leo. Nulla eros odio, molestie id interdum maximus, hendrerit non mi. Duis nunc neque, eleifend sed venenatis sit amet, sollicitudin quis elit. Ut vel gravida neque.',
                     }}
                  >
                     <Textarea name="default" title="Description" maxRows={7} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
