import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _extends from "@babel/runtime/helpers/extends";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React from 'react';
import { addStoryInGroup, LOW_LEVEL_BLOCKS } from '../../../.storybook/utils';
import { DatePicker, DatePickerInput, Toggle } from '../../index';
import { DateTime } from 'luxon';
var languages = ['da-DK', 'de-DE', 'en-GB', 'en-US', 'es-ES', 'fi-FI', 'fr-BE', 'fr-FR', 'it-IT', 'nb-NO', 'nl-BE', 'nl-NL', 'pl-PL', 'pt-PT', 'sv-SE', 'tr-TR'];
var sizes = ['small', 'medium', 'large'];
var optionalSizes = {
  small: 'small',
  medium: 'medium',
  large: 'large',
  none: null
};

var customFormatDate = function customFormatDate(date, locale) {
  return DateTime.fromJSDate(date).setLocale(locale).toLocaleString(DateTime.DATETIME_HUGE);
};

var inputPlaceholderToday = function inputPlaceholderToday() {
  var locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'nl-BE';
  return DateTime.fromJSDate(new Date()).setLocale(locale).toLocaleString(DateTime.DATE_SHORT);
};

var preSelectedDate = DateTime.local().plus({
  days: 3
}).toJSDate();
export default {
  component: DatePicker,
  title: addStoryInGroup(LOW_LEVEL_BLOCKS, 'Form elements/DatePicker')
};
export var singleDate = function singleDate(args) {
  var handleOnChange = function handleOnChange(selectedDate) {
    console.log('Selected date', selectedDate);
  };

  return /*#__PURE__*/React.createElement(DatePicker, _extends({
    onChange: handleOnChange,
    selectedDate: preSelectedDate
  }, args));
};
singleDate.storyName = 'Single date';
singleDate.args = {
  bordered: true,
  className: '',
  modifiers: {
    today: true,
    outside: true
  },
  selectedDate: new Date(),
  size: 'medium',
  withMonthPicker: true,
  showWeekNumbers: true
};
singleDate.parameters = {
  design: [{
    name: 'Figma',
    type: 'figma',
    url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=980%3A0'
  }, {
    name: 'Vendor docs',
    type: 'iframe',
    url: 'http://react-day-picker.js.org/api/DayPicker'
  }]
};
export var inputSingleDate = function inputSingleDate(args) {
  var handleOnChange = function handleOnChange(selectedDate) {
    console.log('Selected date', selectedDate);
  };

  return /*#__PURE__*/React.createElement(DatePickerInput, _extends({}, args, {
    dayPickerProps: _objectSpread({}, args.dayPickerProps),
    inputProps: _objectSpread(_objectSpread({}, args.inputProps), {}, {
      placeholder: inputPlaceholderToday(args.locale)
    }),
    footer: /*#__PURE__*/React.createElement(Toggle, {
      label: "Lorem ipsum dolor sit amet, suspendisse faucibus nunc et pellentesque",
      size: "small"
    }),
    formatDate: customFormatDate,
    onChange: handleOnChange,
    selectedDate: preSelectedDate
  }));
};
inputSingleDate.storyName = 'Input single date';
inputSingleDate.args = {
  dayPickerProps: {
    numberOfMonths: 1,
    showOutsideDays: true,
    showWeekNumbers: true,
    withMonthPicker: false
  },
  inputProps: {
    bold: false,
    disable: false,
    error: '',
    helpText: 'Pick a date',
    inverse: false,
    warning: '',
    readonly: false,
    width: ''
  },
  locale: 'nl-BE',
  size: 'medium',
  inputSize: undefined,
  datePickerSize: undefined
};
inputSingleDate.argTypes = {
  locale: {
    control: 'select',
    options: languages
  },
  size: {
    control: 'select',
    options: sizes
  },
  inputSize: {
    control: 'select',
    options: optionalSizes
  },
  datePickerSize: {
    control: 'select',
    options: optionalSizes
  }
};
inputSingleDate.parameters = {
  design: [{
    name: 'Figma',
    type: 'figma',
    url: 'https://www.figma.com/file/LHH25GN90ljQaBEUNMsdJn/Desktop-components?node-id=980%3A0'
  }, {
    name: 'Vendor docs',
    type: 'iframe',
    url: 'http://react-day-picker.js.org/api/DayPickerInput'
  }]
};