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

const css = styled.div;

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

storiesOf('Components/Switch', module)
   .add('default', () => {
      const [checked, setChecked] = useState();

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with color', () => {
      const [checked, setChecked] = useState(true);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Switch title="Checkbox" color="pink" checked={checked} onChange={setChecked} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with rounded', () => {
      const [checked, setChecked] = useState(true);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Switch title="Checkbox" rounded checked={checked} onChange={setChecked} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with size', () => {
      const [checked, setChecked] = useState(true);
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Switch title="Checkbox" size={80} checked={checked} onChange={setChecked} />
               </div>
            </div>
         </Style>
      );
   })
   .add('with global theme', () => {
      const [checked, setChecked] = useState(true);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <ThemeProvider
                     theme={{
                        checkbox: {
                           defaultColor: 'pink',
                           size: 120,
                           rounded: true,
                        },
                     }}
                  >
                     <Switch checked={checked} onChange={setChecked} />
                  </ThemeProvider>
               </div>
            </div>
         </Style>
      );
   })
   .add('with variant', () => {
      const [checked, setChecked] = useState(true);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="primary" rounded />
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="secondary" rounded />
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="success" rounded />
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="warning" rounded />
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="danger" rounded />
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="info" rounded />
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="light" rounded />
                  <Switch title="Checkbox" checked={checked} onChange={setChecked} variant="dark" rounded />
               </div>
            </div>
         </Style>
      );
   })
   .add('with initial value', () => {
      const [checked, setChecked] = useState(true);

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Switch title="Checkbox" color="red" checked={checked} onChange={setChecked} />
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with initial value', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={(v) => console.log(v)} initialData={{ checkbox: true }}>
                     <Switch name="checkbox" title="Checked" color="red" />
                     <button type="submit">sdsde</button>
                  </Form>
                  <Form onSubmit={(v) => console.log(v)} initialData={{ checkbox: false }}>
                     <Switch name="checkbox" title="Not Checked" color="red" />
                     <button type="submit">sdsde</button>
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with initial value (custom)', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ checkbox: { id: 1 } }}>
                     <Switch name="checkbox" title="Checked" color="red" valueTrue={{ id: 1 }} />
                  </Form>
                  <Form onSubmit={() => {}} initialData={{ checkbox: { id: 2 } }}>
                     <Switch name="checkbox" title="Not Checked" color="red" valueTrue={{ id: 1 }} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with object value async', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ checkbox: { id: 2 } }} ref={formRef}>
                     <Switch name="checkbox" title="Checkbox" color="red" valueTrue={{ id: 1 }} />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('unform - with error', () => {
      const formRef = useRef<FormHandles>();

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

      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}} initialData={{ checkbox: true }} ref={formRef}>
                     <Switch name="checkbox" title="Checkbox" color="red" checked />
                  </Form>
               </div>
            </div>
         </Style>
      );
   })
   .add('with error', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Switch error="Field is required" title="Checkbox" color="red" checked />
               </div>
            </div>
         </Style>
      );
   })
   .add('with disabled', () => {
      return (
         <Style>
            <div className="row">
               <div className="m-4 col-sm-3">
                  <Form onSubmit={() => {}}>
                     <Switch name="checkbox" title="Checkbox" color="red" checked disabled />
                  </Form>
               </div>
            </div>
         </Style>
      );
   });
