import React, { useEffect, useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Form } from '@devesharp/unform-web';
import * as dateFns from 'date-fns';
import { ThemeProvider } from 'styled-components';
import { Input } from '../Input';
import { Datepicker } from './index';

storiesOf('Components/Datepicker', module)
   .add('default', () => {
      const [value, setValue] = useState<Date>();

      return (
         <div className="p-4">
            <div className="row">
               <div className="col-1">
                  <Datepicker
                     title="Datepicker"
                     value={value}
                     onValueChange={(v) => {
                        setValue(v);
                     }}
                  />
                  <Input />
               </div>
            </div>
         </div>
      );
   })
   .add('with timepicker', () => {
      const [value, setValue] = useState<Date>();
      // const [allDay, setAllDay] = useState();

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               withTimePicker
            />
         </div>
      );
   })
   .add('with timepicker and enableAllDay', () => {
      const [value, setValue] = useState<Date>();
      const [allDay, setAllDay] = useState(false);

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               allDay={allDay}
               onAllDayChange={setAllDay}
               withTimePicker
               enableAllDay
            />
         </div>
      );
   })
   .add('with initial date datepicker', () => {
      const [value, setValue] = useState<Date>(new Date());

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
            />
         </div>
      );
   })
   .add('with initial date timepicker', () => {
      const [value, setValue] = useState<Date>(new Date());
      // const [allDay, setAllDay] = useState();

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               withTimePicker
            />
         </div>
      );
   })
   .add('with initial date timepicker and enableAllDay', () => {
      const [value, setValue] = useState<Date>(new Date());
      const [allDay, setAllDay] = useState(true);

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               allDay={allDay}
               onAllDayChange={setAllDay}
               withTimePicker
               enableAllDay
            />
         </div>
      );
   })
   .add('with disablePastDates', () => {
      const [value, setValue] = useState<Date>();

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               disablePastDates
            />
         </div>
      );
   })
   .add('with formatted', () => {
      const [value, setValue] = useState<Date>();
      const [string, setString] = useState('');

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v, f) => {
                  setValue(v);
                  setString(f);
               }}
               formattedString="yyyy-MM-dd"
               disablePastDates
            />
            <div>
               <b>String:</b> {string}
            </div>
         </div>
      );
   })
   .add('with applyOnSelect', () => {
      const [value, setValue] = useState<Date>();

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               applyOnSelect
            />
         </div>
      );
   })
   .add('with error', () => {
      const [value, setValue] = useState<Date>();

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               applyOnSelect
               error="Invalid Date"
            />
         </div>
      );
   })
   .add('with global theme', () => {
      const [value, setValue] = useState<Date>();
      const [allDay, setAllDay] = useState(false);

      return (
         <div className="p-4">
            <ThemeProvider
               theme={{
                  datePicker: {
                     defaultColor: 'pink',
                  },
               }}
            >
               <Datepicker
                  title="Datepicker"
                  value={value}
                  onValueChange={(v) => {
                     setValue(v);
                  }}
                  calendarIcon={<>ICON</>}
                  allDay={allDay}
                  onAllDayChange={setAllDay}
                  withTimePicker
                  enableAllDay
               />
               <Datepicker
                  title="Datepicker"
                  value={value}
                  onValueChange={(v) => {
                     setValue(v);
                  }}
                  calendarIcon={<>ICON</>}
                  allDay={allDay}
                  onAllDayChange={setAllDay}
                  withTimePicker
                  enableAllDay
               />
               <Datepicker
                  title="Datepicker"
                  value={value}
                  onValueChange={(v) => {
                     setValue(v);
                  }}
                  calendarIcon={<>ICON</>}
                  allDay={allDay}
                  onAllDayChange={setAllDay}
                  withTimePicker
                  enableAllDay
               />
            </ThemeProvider>
         </div>
      );
   })
   .add('unform - default', () => {
      return (
         <div className="p-4">
            <Form
               onSubmit={(d) => {
                  console.log(d);
               }}
            >
               <Datepicker name="datepicker" title="Datepicker" />

               <button>sdasd</button>
            </Form>
         </div>
      );
   })
   .add('as popup', () => {
      const [value, setValue] = useState<Date>();

      return (
         <div className="p-4">
            <Datepicker
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               asPopup
            >
               <div>Custom datepicker: {value && dateFns.format(value, "d MMM yyyy 'Ás' HH:mm")}</div>
            </Datepicker>
         </div>
      );
   })
   .add('with custom buttons timepicker', () => {
      const [value, setValue] = useState<Date>();
      // const [allDay, setAllDay] = useState();

      return (
         <div className="p-4">
            <Datepicker
               title="Datepicker"
               value={value}
               onValueChange={(v) => {
                  setValue(v);
               }}
               TimerPickerPlusComponent={<>++</>}
               TimerPickerMinusComponent={<>--</>}
               withTimePicker
            />
         </div>
      );
   });
