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

const css = styled.div;

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

storiesOf('Components/Radio', module)
   .add('unform - default', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form
                     onSubmit={(e) => {
                        console.log(e);
                     }}
                  >
                     <Radio
                        name="default"
                        options={[
                           { value: 'M', name: 'Male' },
                           { value: 'F', name: 'Female' },
                           { value: 'D', name: 'Disabled', disabled: true },
                        ]}
                     />
                     <br />
                     <button>Submit</button>
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('default', () => {
      const [value, setValue] = useState(null);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Radio
                     value={value}
                     onChange={setValue}
                     options={[
                        { value: 'M', name: 'Male' },
                        { value: 'F', name: 'Female' },
                        { value: 'D', name: 'Disabled', disabled: true },
                     ]}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with rightRadio', () => {
      const [value, setValue] = useState(null);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Radio
                     value={value}
                     onChange={setValue}
                     rightRadio
                     options={[
                        { value: 'M', name: 'Male' },
                        { value: 'F', name: 'Female' },
                        { value: 'D', name: 'Disabled', disabled: true },
                     ]}
                  />
               </div>
            </div>
         </Style>
      );
   })
   .add('with color', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ radio: 'M' }}>
                     <Radio
                        color="pink"
                        name="radio"
                        options={[
                           { value: 'M', name: 'Male' },
                           { value: 'F', name: 'Female' },
                           { value: 'D', name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with inital value object value', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ radio: { id: 'F' } }}>
                     <Radio
                        color="pink"
                        name="radio"
                        options={[
                           { value: { id: 'M' }, name: 'Male' },
                           { value: { id: 'F' }, name: 'Female' },
                           { value: { id: 'D' }, name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
                  <br />
                  <div>Initial value wrong:</div>
                  <br />
                  <Form onSubmit={() => {}} initialData={{ radio: { id: 'T' } }}>
                     <Radio
                        color="pink"
                        name="radio"
                        options={[
                           { value: { id: 'M' }, name: 'Male' },
                           { value: { id: 'F' }, name: 'Female' },
                           { value: { id: 'D' }, name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with object value async', () => {
      const formRef = useRef<FormHandles>();

      useEffect(() => {
         formRef.current.setFieldValue('radio', { id: 'F' });
      }, []);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ radio: { id: 2 } }} ref={formRef}>
                     <Radio
                        name="radio"
                        options={[
                           { value: { id: 'M' }, name: 'Male' },
                           { value: { id: 'F' }, name: 'Female' },
                           { value: { id: 'D' }, name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ radio: { id: 2 } }} ref={formRef}>
                     <Radio
                        name="radio"
                        options={[
                           { value: { id: 'M' }, name: 'Male' },
                           { value: { id: 'F' }, name: 'Female' },
                           { value: { id: 'D' }, name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with disabled', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Radio
                        name="radio"
                        options={[
                           { value: { id: 'M' }, name: 'Male' },
                           { value: { id: 'F' }, name: 'Female', disabled: true },
                           { value: { id: 'D' }, name: 'Disabled', disabled: true },
                        ]}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
