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

const css = styled.div;

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

storiesOf('Components/Forms/InputYoutube', module)
   .add('default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <InputYoutube name="default" keyYTB="AIzaSyAyHRxix5B3js1FRjaEUUV_GJZVG7Hv34w" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with value', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-6">
                  <Form onSubmit={() => {}} initialData={{ default: 'https://www.youtube.com/watch?v=TSTp9tDGJxk' }}>
                     <InputYoutube name="default" keyYTB="AIzaSyAyHRxix5B3js1FRjaEUUV_GJZVG7Hv34w" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      const formRef = useRef<FormHandles>();

      const onInvalidUrl = (): void => {
         formRef.current.setFieldError('default', 'Url Invalida');
      };

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-6">
                  <Form
                     ref={formRef}
                     onSubmit={() => {}}
                     initialData={{ default: 'https://www.youtube.com/watch?v=s' }}
                  >
                     <InputYoutube name="default" keyYTB="AIzaSyAyHRxix5B3js1FRjaEUUV_GJZVG7Hv34w" />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with url invalid error', () => {
      const formRef = useRef<FormHandles>();

      const onInvalidUrl = (): void => {
         formRef.current.setFieldError('default', 'Url Invalida');
      };

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-6">
                  <Form
                     ref={formRef}
                     onSubmit={() => {}}
                     initialData={{ default: 'https://www.youtube.com/watch?v=s' }}
                  >
                     <InputYoutube
                        onInvalidUrl={onInvalidUrl}
                        name="default"
                        keyYTB="AIzaSyAyHRxix5B3js1FRjaEUUV_GJZVG7Hv34w"
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
