import React, { useEffect, useRef, useState } from 'react';
import { storiesOf } from '@storybook/react';
import { Form } from '@unform/web';
import { convertStringToDate } from '../../../services';
import { Datepicker, IInputDatePicker } from './datepicker';

const initialDateObject = {
   dateYYYYMMDD: '20200101',
   day: 1,
   month: 1,
   year: 2020,
   allDay: false,
};

const initialDateHourObject = {
   dateYYYYMMDD: '20200101',
   day: 1,
   month: 1,
   year: 2020,
   allDay: false,
   hour: '20',
   minutes: '30',
};

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

      return (
         <div className="p-4">
            <Form onSubmit={(data) => setValue(data)} ref={form}>
               <Datepicker name="datepicker" title="Datepicker" onChange={() => form.current.submitForm()} />
            </Form>
         </div>
      );
   })
   .add('with applyOnSelect', () => {
      const form = useRef(null);
      const [value, setValue] = useState([]);

      return (
         <div className="p-4">
            <Form onSubmit={(data) => setValue(data)} ref={form}>
               <Datepicker
                  name="datepicker"
                  title="Datepicker"
                  onChange={() => form.current.submitForm()}
                  applyOnSelect
               />
            </Form>
         </div>
      );
   })
   .add('initial initial value string', () => {
      return (
         <div className="p-4">
            <Form onSubmit={() => {}} initialData={{ datepicker: '20201212' }}>
               <Datepicker name="datepicker" title="Datepicker" applyOnSelect />
            </Form>
         </div>
      );
   })
   .add('with initial value object datepicker', () => {
      return (
         <div className="p-4">
            <Form
               onSubmit={() => {}}
               initialData={{ datepicker: { date: convertStringToDate('20140211113030') } as IInputDatePicker }}
            >
               <Datepicker name="datepicker" title="Datepicker" applyOnSelect withTimePicker />
            </Form>
         </div>
      );
   })
   .add('with initial value object datepicker allDay', () => {
      return (
         <div className="p-4">
            <Form
               onSubmit={() => {}}
               initialData={{
                  datepicker: { date: convertStringToDate('20140211113030'), allDay: true } as IInputDatePicker,
               }}
            >
               <Datepicker name="datepicker" title="Datepicker" applyOnSelect withTimePicker />
            </Form>
         </div>
      );
   })
   .add('with error', () => {
      const formRef = useRef<any>();

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

      return (
         <div className="p-4">
            <Form onSubmit={() => {}} ref={formRef}>
               <Datepicker name="datepicker" title="Datepicker" />
            </Form>
         </div>
      );
   });
// .add('initial with string', () => {
//     const form = useRef(null);
//     const [value, setValue] = useState([]);
//
//     return (
//         <div className="p-4">
//             <div className="data" style={{ display: 'none' }}>
//                 {JSON.stringify(value)}
//             </div>
//
//             <Form onSubmit={(data) => setValue(data)} ref={form} initialData={{ datepicker: '20200101' }}>
//                 <Datepicker name="datepicker" onChange={() => form.current.submitForm()} />
//                 <button type="submit" className="btn btn-primary">
//                     Submit
//                 </button>
//             </Form>
//         </div>
//     );
// })
// .add('with hour', () => {
//     const form = useRef(null);
//     const [value, setValue] = useState([]);
//
//     return (
//         <div className="p-4">
//             <div className="data" style={{ display: 'none' }}>
//                 {JSON.stringify(value)}
//             </div>
//
//             <Form onSubmit={(data) => setValue(data)} ref={form}>
//                 <Datepicker name="datepicker" onChange={() => form.current.submitForm()} onlyDate={false} />
//             </Form>
//         </div>
//     );
// })
// .add('initial hour with object', () => {
//     const form = useRef(null);
//     const [value, setValue] = useState([]);
//
//     return (
//         <div className="p-4">
//             <div className="data" style={{ display: 'none' }}>
//                 {JSON.stringify(value)}
//             </div>
//
//             <Form
//                 onSubmit={(data) => setValue(data)}
//                 ref={form}
//                 initialData={{ datepicker: initialDateHourObject }}
//             >
//                 <Datepicker name="datepicker" onChange={() => form.current.submitForm()} onlyDate={false} />
//                 <button type="submit" className="btn btn-primary">
//                     Submit
//                 </button>
//             </Form>
//         </div>
//     );
// })
// .add('initial hour with string', () => {
//     const form = useRef(null);
//     const [value, setValue] = useState([]);
//
//     return (
//         <div className="p-4">
//             <div className="data" style={{ display: 'none' }}>
//                 {JSON.stringify(value)}
//             </div>
//
//             <Form onSubmit={(data) => setValue(data)} ref={form} initialData={{ datepicker: '20200101203000' }}>
//                 <Datepicker name="datepicker" onChange={() => form.current.submitForm()} onlyDate={false} />
//                 <button type="submit" className="btn btn-primary">
//                     Submit
//                 </button>
//             </Form>
//         </div>
//     );
// })
// .add('initial all day with object', () => {
//     const form = useRef(null);
//     const [value, setValue] = useState([]);
//
//     return (
//         <div className="p-4">
//             <div className="data" style={{ display: 'none' }}>
//                 {JSON.stringify(value)}
//             </div>
//
//             <Form
//                 onSubmit={(data) => setValue(data)}
//                 ref={form}
//                 initialData={{ datepicker: { ...initialDateHourObject, allDay: true } }}
//             >
//                 <Datepicker name="datepicker" onChange={() => form.current.submitForm()} onlyDate={false} />
//                 <button type="submit" className="btn btn-primary">
//                     Submit
//                 </button>
//             </Form>
//         </div>
//     );
// });
