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

const css = styled.div;

const Style = css`
   background: white !important;
   padding: 20px;

   .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('default', () => {
      function ButtonDefault(): any {
         const buttons = [
            { name: 'Eren', value: 'Eren' },
            { name: 'Levi', value: 'Levi' },
            { name: 'Rainer', value: 'Rainer' },
            { name: 'Falco', value: 'Falco' },
         ];

         const [value, setValue] = useState();

         return (
            <>
               <Style>
                  <ButtonsGroup options={buttons} value={value} onSelect={setValue} />
               </Style>
            </>
         );
      }

      return <ButtonDefault />;
   })
   .add('title', () => {
      function ButtonDefault(): any {
         const buttons = [
            { name: 'Eren', value: 'Eren' },
            { name: 'Levi', value: 'Levi' },
            { name: 'Rainer', value: 'Rainer' },
            { name: 'Falco', value: 'Falco' },
         ];

         const [value, setValue] = useState();

         return (
            <>
               <Style>
                  <ButtonsGroup title="Characters" options={buttons} value={value} onSelect={setValue} />
               </Style>
            </>
         );
      }

      return <ButtonDefault />;
   })
   .add('allowEmpty', () => {
      function ButtonDefault(): any {
         const buttons = [
            { name: 'Eren', value: 'Eren' },
            { name: 'Levi', value: 'Levi' },
            { name: 'Rainer', value: 'Rainer' },
            { name: 'Falco', value: 'Falco' },
         ];

         const [value, setValue] = useState();

         return (
            <>
               <Style>
                  <ButtonsGroup options={buttons} title="Characters" value={value} onSelect={setValue} allowEmpty />
               </Style>
            </>
         );
      }

      return <ButtonDefault />;
   })
   .add('multiple selection', () => {
      function ButtonDefault(): any {
         const buttons = [
            { name: 'Eren', value: 'Eren' },
            { name: 'Levi', value: 'Levi' },
            { name: 'Rainer', value: 'Rainer' },
            { name: 'Falco', value: 'Falco' },
         ];

         const [value, setValue] = useState();

         return (
            <>
               <Style>
                  <ButtonsGroup value={value} onSelect={setValue} options={buttons} title="Characters" multiSelection />
               </Style>
            </>
         );
      }

      return <ButtonDefault />;
   })
   .add('with initial value', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const [value, setValue] = useState('Rainer');

      return (
         <>
            <Style>
               <ButtonsGroup value={value} onSelect={setValue} options={buttons} title="Characters" />
            </Style>
         </>
      );
   })
   .add('with initial value multiSelection', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const [value, setValue] = useState(['Rainer', 'Falco']);

      return (
         <>
            <Style>
               <ButtonsGroup options={buttons} value={value} onSelect={setValue} title="Characters" multiSelection />
            </Style>
         </>
      );
   })
   .add('with error', () => {
      function Stub(): any {
         const buttons = [
            { name: 'Eren', value: 'Eren' },
            { name: 'Levi', value: 'Levi' },
            { name: 'Rainer', value: 'Rainer' },
            { name: 'Falco', value: 'Falco' },
         ];

         const formRef = useRef<any>();

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

         return (
            <>
               <Style>
                  <Form onSubmit={() => {}} initialData={{ default: ['Rainer', 'Falco'] }} ref={formRef}>
                     <ButtonsGroup options={buttons} title="Characters" error="Erro qualquer" />
                  </Form>
               </Style>
            </>
         );
      }

      return <Stub />;
   })
   .add('default (unform)', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      return (
         <>
            <Style>
               <Form onSubmit={() => {}}>
                  <ButtonsGroup name="buttons" options={buttons} />
               </Form>
            </Style>
         </>
      );
   })
   .add('with error (unform)', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const formRef = useRef(null);

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

      return (
         <Form onSubmit={() => {}} ref={formRef}>
            <ButtonsGroup name="default" options={buttons} />
         </Form>
      );
   })
   .add('with variant color', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const [value, setValue] = useState('Rainer');

      return (
         <Form onSubmit={() => {}}>
            <ButtonsGroup variant="primary" options={buttons} value={value} onSelect={setValue} />
            <ButtonsGroup variant="secondary" options={buttons} value={value} onSelect={setValue} />
            <ButtonsGroup variant="success" options={buttons} value={value} onSelect={setValue} />
            <ButtonsGroup variant="warning" options={buttons} value={value} onSelect={setValue} />
            <ButtonsGroup variant="danger" options={buttons} value={value} onSelect={setValue} />
            <ButtonsGroup variant="info" options={buttons} value={value} onSelect={setValue} />
            <ButtonsGroup variant="light" options={buttons} value={value} onSelect={setValue} />
            <ButtonsGroup variant="dark" options={buttons} value={value} onSelect={setValue} />
         </Form>
      );
   })
   .add('with custom style', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const [value, setValue] = useState('Rainer');

      return (
         <Style>
            <Form onSubmit={() => {}}>
               <ButtonsGroup
                  options={buttons}
                  value={value}
                  onSelect={setValue}
                  activeBtnStyle={{ backgroundColor: 'pink' }}
                  activeTextStyle={{ color: 'crimson' }}
                  inactiveBtnStyle={{ backgroundColor: 'white' }}
                  inactiveTextStyle={{ color: 'crimson' }}
               />
            </Form>
         </Style>
      );
   })
   .add('with oneLine', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
         { name: 'Mikasa', value: 'Mikasa' },
         { name: 'Armin', value: 'Armin' },
         { name: 'Annie', value: 'Annie' },
         { name: 'Jean', value: 'Jean' },
      ];

      const [value, setValue] = useState('Jean');

      return (
         <Style>
            <div style={{ width: '200px' }}>
               <Form onSubmit={() => {}}>
                  <ButtonsGroup options={buttons} value={value} onSelect={setValue} />
                  <br />
                  <br />
                  <ButtonsGroup options={buttons} value={value} onSelect={setValue} oneLine />
               </Form>
            </div>
         </Style>
      );
   })
   .add('with rounded', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const [value, setValue] = useState('Jean');

      return (
         <Style>
            <Form onSubmit={() => {}}>
               <ButtonsGroup options={buttons} value={value} onSelect={setValue} rounded />
            </Form>
         </Style>
      );
   })
   .add('with split & rounded', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Falco', value: 'Falco' },
      ];

      const [value, setValue] = useState('Jean');

      return (
         <Style>
            <Form onSubmit={() => {}}>
               <ButtonsGroup options={buttons} value={value} onSelect={setValue} rounded separate />
            </Form>
         </Style>
      );
   })
   .add('with full', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
      ];

      const [value, setValue] = useState('Levi');

      return (
         <Style>
            <Form onSubmit={() => {}}>
               <ButtonsGroup options={buttons} value={value} onSelect={setValue} fullLine />
            </Form>
         </Style>
      );
   })
   .add('with outline', () => {
      const buttons = [
         { name: 'Eren', value: 'Eren' },
         { name: 'Levi', value: 'Levi' },
         { name: 'Rainer', value: 'Rainer' },
         { name: 'Mikasa', value: 'Mikasa' },
      ];

      const [value, setValue] = useState('Levi');

      return (
         <Style>
            <Form onSubmit={() => {}}>
               <ButtonsGroup options={buttons} value={value} onSelect={setValue} fullLine outline />
            </Form>
         </Style>
      );
   });
