import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useState } from 'react';
import { SingleDatePickerInput } from './SingleDatePickerInput';
import { DateRangePickerInput } from './DateRangePickerInput';
import Input from '../Input';
import moment from 'moment';
import { Controller, useForm } from 'react-hook-form';
import 'react-dates/initialize';
import { SingleDatePicker, DateRangePicker } from 'react-dates';
import markdown from './README.mdx';
export default {
  title: 'Components/UI Elements/DatePicker',
  component: SingleDatePickerInput,
  markdown: 'hello',
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: markdown
  }
};
export var SingleDatePickerDefault = function SingleDatePickerDefault(args) {
  return /*#__PURE__*/React.createElement(SingleDatePickerInput, args);
};
SingleDatePickerDefault.args = {
  datePicker: SingleDatePicker,
  labelText: 'Label text (labelText)',
  placeholder: 'Placeholder text (placeholder)',
  disabled: false,
  hideLabel: false,
  showClearDate: false,
  invalid: false,
  invalidText: 'A valid value is required',
  showDefaultInputIcon: true,
  inputIconPosition: 'after',
  helperText: 'Optional helper text.'
};
var singleSourceCode = "\nimport 'react-dates/initialize';\nimport { SingleDatePickerInput } from \"@wfp/ui\";\nimport { SingleDatePicker } from 'react-dates';\n\n<SingleDatePickerInput\n  datePicker={SingleDatePicker}\n  helperText=\"Optional helper text.\"\n  inputIconPosition=\"after\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Label datepicker\"\n  onBlur={()=>{}}\n  onChange={()=>{}}\n  onFocus={()=>{}}\n  placeholder=\"Placeholder text (placeholder)\"\n  showDefaultInputIcon\n\n/>\n";
SingleDatePickerDefault.story = {
  parameters: {
    docs: {
      source: {
        code: singleSourceCode
      }
    }
  }
};
export var SingleDatePickerNew = function SingleDatePickerNew(args) {
  var _useState = useState(moment()),
      _useState2 = _slicedToArray(_useState, 2),
      date = _useState2[0],
      setDate = _useState2[1];

  var _useState3 = useState(false),
      _useState4 = _slicedToArray(_useState3, 2),
      focused = _useState4[0],
      setFocused = _useState4[1];

  return /*#__PURE__*/React.createElement(Input, {
    labelText: "Input using SingleDatePicker by Airbnb",
    helperText: "HelperText"
  }, function (e) {
    return /*#__PURE__*/React.createElement(SingleDatePicker, {
      showDefaultInputIcon: true,
      inputIconPosition: "after",
      onDateChange: function onDateChange(newDate) {
        return setDate(newDate);
      },
      focused: focused,
      onFocusChange: function onFocusChange(_ref) {
        var focused = _ref.focused;
        return setFocused(focused);
      },
      date: date,
      id: "your_unique_id"
    });
  });
};
export var SingleDatePickerNewReactHookForm = function SingleDatePickerNewReactHookForm(args) {
  var defaultValues = {
    test: '2020-12-01T11:00:00.000Z'
  };

  var _useState5 = useState(false),
      _useState6 = _slicedToArray(_useState5, 2),
      focused = _useState6[0],
      setFocused = _useState6[1];

  var _useForm = useForm({
    defaultValues: defaultValues
  }),
      control = _useForm.control,
      handleSubmit = _useForm.handleSubmit;

  var onSubmit = function onSubmit(data) {
    return alert(JSON.stringify(data));
  };

  return /*#__PURE__*/React.createElement("form", {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "test",
    render: function render(_ref2) {
      var onChange = _ref2.onChange,
          onBlur = _ref2.onBlur,
          value = _ref2.value,
          name = _ref2.name,
          ref = _ref2.ref;
      return /*#__PURE__*/React.createElement(Input, {
        labelText: "Input using SingleDatePicker by Airbnb",
        helperText: "HelperText"
      }, function (e) {
        return /*#__PURE__*/React.createElement(SingleDatePicker, {
          onDateChange: function onDateChange(newDate) {
            return onChange(newDate);
          },
          focused: focused,
          onFocusChange: function onFocusChange(_ref3) {
            var focused = _ref3.focused;
            return setFocused(focused);
          },
          date: moment(value),
          id: "another_unique_id",
          showDefaultInputIcon: true,
          inputIconPosition: "after"
        });
      });
    }
  }));
};
export var DateRangePickerDefault = function DateRangePickerDefault(args) {
  return /*#__PURE__*/React.createElement(DateRangePickerInput, args);
};
DateRangePickerDefault.args = {
  datePicker: DateRangePicker,
  date: moment(),
  labelText: 'Label text (labelText)',
  placeholder: 'Placeholder text (placeholder)',
  disabled: false,
  hideLabel: false,
  showClearDate: false,
  invalid: false,
  invalidText: 'A valid value is required',
  showDefaultInputIcon: true,
  inputIconPosition: 'after',
  helperText: 'Optional helper text.'
};
var dateRangeSourceCode = "\nimport 'react-dates/initialize';\nimport { DateRangePickerInput } from \"@wfp/ui\";\nimport { DateRangePicker } from 'react-dates';\n\n<DateRangePickerInput\n  datePicker={DateRangePicker}\n  helperText=\"Optional helper text.\"\n  inputIconPosition=\"after\"\n  invalidText=\"A valid value is required\"\n  labelText=\"Label datepicker\"\n  onBlur={()=>{}}\n  onChange={()=>{}}\n  onFocus={()=>{}}\n  placeholder=\"Placeholder text (placeholder)\"\n  showDefaultInputIcon\n\n/>\n";
DateRangePickerDefault.story = {
  parameters: {
    docs: {
      source: {
        code: dateRangeSourceCode
      }
    }
  }
}; // export const singleDatePickerNewReactHookForm = (args) => {
//   const defaultValues = { test: '2020-12-01T11:00:00.000Z' };
//   const [focused, setFocused] = useState(false);
//   const { control, register, handleSubmit } = useForm({ defaultValues });
//   const onSubmit = (data) => alert(JSON.stringify(data));
//   return (
//     <form onSubmit={handleSubmit(onSubmit)}>
//       <Controller
//         control={control}
//         name="test"
//         render={({ onChange, onBlur, value, name, ref }) => (
//           <Input
//             labelText="Input using SingleDatePicker by Airbnb"
//             helperText="HelperText">
//             {(e) => (
//               <SingleDatePicker
//                 onDateChange={(newDate) => onChange(newDate)}
//                 focused={focused}
//                 onFocusChange={({ focused }) => setFocused(focused)}
//                 showDefaultInputIcon
//                 inputIconPosition='after'
//                 date={moment(value)}
//                 id="another_unique_id"
//               />
//             )}
//           </Input>
//         )}
//       />
//       <input type="submit" />
//     </form>
//   );
// };

export var DatePickerHookForm = function DatePickerHookForm(args) {
  var _useForm2 = useForm(),
      control = _useForm2.control;

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Controller, {
    as: /*#__PURE__*/React.createElement(SingleDatePickerInput, {
      datePicker: SingleDatePicker,
      helperText: "Optional helper text.",
      inputIconPosition: "after",
      invalidText: "A valid value is required",
      labelText: "Label datepicker",
      onBlur: function onBlur() {},
      onFocus: function onFocus() {},
      placeholder: "Placeholder text (placeholder)",
      showDefaultInputIcon: true
    }),
    control: control,
    valueName: "selected" // DateSelect value's name is selected
    ,
    onChange: function onChange(_ref4) {
      var _ref5 = _slicedToArray(_ref4, 1),
          selected = _ref5[0];

      return selected;
    },
    name: "SingleDatePicker",
    className: "input",
    placeholderText: "Select date"
  }));
};
export var DatePickerRangeHookForm = function DatePickerRangeHookForm(args) {
  var _useForm3 = useForm(),
      control = _useForm3.control;

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Controller, {
    as: /*#__PURE__*/React.createElement(DateRangePickerInput, {
      datePicker: DateRangePicker,
      helperText: "Optional helper text.",
      inputIconPosition: "after",
      invalidText: "A valid value is required",
      labelText: "Label datepicker",
      onBlur: function onBlur() {},
      onChange: function onChange() {},
      onFocus: function onFocus() {},
      placeholder: "Placeholder text (placeholder)",
      showDefaultInputIcon: true
    }),
    control: control,
    valueName: "selected" // DateSelect value's name is selected
    ,
    onChange: function onChange(_ref6) {
      var _ref7 = _slicedToArray(_ref6, 1),
          selected = _ref7[0];

      return selected;
    },
    name: "DateRangePicker",
    className: "input",
    placeholderText: "Select date"
  }));
}; // singleDatePickerHookForm.args = {
//   datePicker: SingleDatePicker,
//   date: moment(),
//   labelText: 'Label text (labelText)',
//   placeholder: 'Placeholder text (placeholder)',
//   disabled: false,
//   hideLabel: false,
//   showClearDate: false,
//   invalid: false,
//   invalidText: 'A valid value is required',
//   showDefaultInputIcon: true,
//   inputIconPosition: 'after',
//   helperText: 'Optional helper text.',
// };
// export const datePickerField = (args) => (
//   <Field
//     {...args}
//     format={(value) => (value ? moment(value) : undefined)}
//     normalize={(data) => data && data.value && data.value.format()}
//   />
// );
// datePickerField.args = {
//   component: ReduxFormWrapper,
//   inputComponent: SingleDatePickerInput,
//   datePicker: SingleDatePicker,
//   name: 'inputname',
//   helperText: 'inputname',
//   labelText: 'Select a date',
// };
// datePickerField.decorators = [
//   (Story) => (
//     <Provider store={store}>
//       <FormWrapper
//         sampleData={{
//           datepicker: {
//             startDate: moment(),
//             endDate: moment().add(15, 'days'),
//           },
//           inputname: moment(),
//         }}>
//         <Story />
//       </FormWrapper>
//     </Provider>
//   ),
// ];
// export const DateRangePickerField = (args) => (
//   <Field
//     {...args}
//     format={(value) =>
//       value
//         ? {
//             startDate: moment(value.startDate),
//             endDate: moment(value.endDate),
//           }
//         : undefined
//     }
//   />
// );
// DateRangePickerField.args = {
//   component: ReduxFormWrapper,
//   inputComponent: DateRangePickerInput,
//   datePicker: DateRangePicker,
//   name: 'datepicker',
//   labelText: 'Select a date range',
// };
// DateRangePickerField.decorators = [
//   (Story) => (
//     <Provider store={store}>
//       <FormWrapper
//         sampleData={{
//           datepicker: {
//             startDate: moment(),
//             endDate: moment().add(15, 'days'),
//           },
//           inputname: moment(),
//         }}>
//         <Story />
//       </FormWrapper>
//     </Provider>
//   ),
// ];