import React, { useEffect, useReducer, useRef } from 'react';
import { action } from '@storybook/addon-actions';
import { storiesOf } from '@storybook/react';
import { Form } from '@unform/web';
import styled from 'styled-components';
import { ButtonsGroup } from '.';
import { Input } from '../../Input/web';

const css = styled.div;

const Style = css`
   background: white !important;

   .btn-primary {
      background: #eee;
      color: black;
      border: none;

      &.active {
         background: ${(props) => props.theme.primary};
         color: white;
      }
   }
`;

storiesOf('Components/ButtonGroup', module)
   .add('default', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <Style>
            <div className="p-4">
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} />
               </Form>
            </div>
         </Style>
      );
   })
   .add('with title', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <Style>
            <div className="p-4">
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" />
               </Form>
            </div>
         </Style>
      );
   })
   .add('allowEmpty', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <Style>
            <div className="p-4">
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} allowEmpty />
               </Form>
            </div>
         </Style>
      );
   })
   .add('multiple selection', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <Style>
            <div className="p-4">
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" multiSelection />
               </Form>
            </div>
         </Style>
      );
   })
   .add('with initial value', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <Style>
            <div className="p-4">
               <Form onSubmit={() => {}} initialData={{ default: 'Rainer' }}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" />
               </Form>
            </div>
         </Style>
      );
   })
   .add('with initial value multiSelection', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <Style>
            <div className="p-4">
               <Form onSubmit={() => {}} initialData={{ default: ['Rainer', 'Falco'] }}>
                  <ButtonsGroup name="default" options={buttons} title="Characters" multiSelection />
               </Form>
            </div>
         </Style>
      );
   })
   .add('event onChange', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <Style>
            <div className="p-4">
               <Form onSubmit={() => {}}>
                  <ButtonsGroup
                     name="default"
                     options={buttons}
                     title="Characters"
                     multiSelection
                     onChange={action('onChange')}
                  />
               </Form>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      const formRef = useRef<any>();

      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      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}>
                     <ButtonsGroup
                        name="default"
                        options={buttons}
                        title="Characters"
                        multiSelection
                        onChange={action('onChange')}
                     />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
