"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.DatePickerRangeHookForm = exports.DatePickerHookForm = exports.DateRangePickerDefault = exports.SingleDatePickerNewReactHookForm = exports.SingleDatePickerNew = exports.SingleDatePickerDefault = exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _SingleDatePickerInput = require("./SingleDatePickerInput");

var _DateRangePickerInput = require("./DateRangePickerInput");

var _Input = _interopRequireDefault(require("../Input"));

var _moment = _interopRequireDefault(require("moment"));

var _reactHookForm = require("react-hook-form");

require("react-dates/initialize");

var _reactDates = require("react-dates");

var _README = _interopRequireDefault(require("./README.mdx"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var _default = {
  title: 'Components/UI Elements/DatePicker',
  component: _SingleDatePickerInput.SingleDatePickerInput,
  markdown: 'hello',
  parameters: {
    componentSubtitle: 'Component',
    status: 'released',
    mdx: _README.default
  }
};
exports.default = _default;

var SingleDatePickerDefault = function SingleDatePickerDefault(args) {
  return /*#__PURE__*/_react.default.createElement(_SingleDatePickerInput.SingleDatePickerInput, args);
};

exports.SingleDatePickerDefault = SingleDatePickerDefault;
SingleDatePickerDefault.args = {
  datePicker: _reactDates.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
      }
    }
  }
};

var SingleDatePickerNew = function SingleDatePickerNew(args) {
  var _useState = (0, _react.useState)((0, _moment.default)()),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      date = _useState2[0],
      setDate = _useState2[1];

  var _useState3 = (0, _react.useState)(false),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      focused = _useState4[0],
      setFocused = _useState4[1];

  return /*#__PURE__*/_react.default.createElement(_Input.default, {
    labelText: "Input using SingleDatePicker by Airbnb",
    helperText: "HelperText"
  }, function (e) {
    return /*#__PURE__*/_react.default.createElement(_reactDates.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"
    });
  });
};

exports.SingleDatePickerNew = SingleDatePickerNew;

var SingleDatePickerNewReactHookForm = function SingleDatePickerNewReactHookForm(args) {
  var defaultValues = {
    test: '2020-12-01T11:00:00.000Z'
  };

  var _useState5 = (0, _react.useState)(false),
      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
      focused = _useState6[0],
      setFocused = _useState6[1];

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

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

  return /*#__PURE__*/_react.default.createElement("form", {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/_react.default.createElement(_reactHookForm.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.default.createElement(_Input.default, {
        labelText: "Input using SingleDatePicker by Airbnb",
        helperText: "HelperText"
      }, function (e) {
        return /*#__PURE__*/_react.default.createElement(_reactDates.SingleDatePicker, {
          onDateChange: function onDateChange(newDate) {
            return onChange(newDate);
          },
          focused: focused,
          onFocusChange: function onFocusChange(_ref3) {
            var focused = _ref3.focused;
            return setFocused(focused);
          },
          date: (0, _moment.default)(value),
          id: "another_unique_id",
          showDefaultInputIcon: true,
          inputIconPosition: "after"
        });
      });
    }
  }));
};

exports.SingleDatePickerNewReactHookForm = SingleDatePickerNewReactHookForm;

var DateRangePickerDefault = function DateRangePickerDefault(args) {
  return /*#__PURE__*/_react.default.createElement(_DateRangePickerInput.DateRangePickerInput, args);
};

exports.DateRangePickerDefault = DateRangePickerDefault;
DateRangePickerDefault.args = {
  datePicker: _reactDates.DateRangePicker,
  date: (0, _moment.default)(),
  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>
//   );
// };

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

  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
    as: /*#__PURE__*/_react.default.createElement(_SingleDatePickerInput.SingleDatePickerInput, {
      datePicker: _reactDates.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 = (0, _slicedToArray2.default)(_ref4, 1),
          selected = _ref5[0];

      return selected;
    },
    name: "SingleDatePicker",
    className: "input",
    placeholderText: "Select date"
  }));
};

exports.DatePickerHookForm = DatePickerHookForm;

var DatePickerRangeHookForm = function DatePickerRangeHookForm(args) {
  var _useForm3 = (0, _reactHookForm.useForm)(),
      control = _useForm3.control;

  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
    as: /*#__PURE__*/_react.default.createElement(_DateRangePickerInput.DateRangePickerInput, {
      datePicker: _reactDates.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 = (0, _slicedToArray2.default)(_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>
//   ),
// ];


exports.DatePickerRangeHookForm = DatePickerRangeHookForm;