function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { memo } from 'react';
import { DateRangePicker, START_DATE, END_DATE } from 'react-nice-dates';
import enUS from 'date-fns/locale/en-US';
import { formatISO } from 'date-fns';

var formatDate = function formatDate(date) {
  return date ? new Date(date) : new Date();
};

var DatePicker = function DatePicker(props) {
  return /*#__PURE__*/React.createElement(DateRangePicker, {
    startDate: new Date(props.gallery.rangeDate.start),
    endDate: new Date(props.gallery.rangeDate.end),
    onStartDateChange: function onStartDateChange(date) {
      return props.startDate(formatISO(formatDate(date)));
    },
    onEndDateChange: function onEndDateChange(date) {
      return props.endDate(formatISO(formatDate(date)));
    },
    minimumLength: 1,
    format: 'dd MMM yyyy',
    locale: enUS
  }, function (_ref) {
    var startDateInputProps = _ref.startDateInputProps,
        endDateInputProps = _ref.endDateInputProps,
        focus = _ref.focus;
    return /*#__PURE__*/React.createElement("div", {
      className: "date-range"
    }, /*#__PURE__*/React.createElement("input", _extends({
      className: 'input' + (focus === START_DATE ? ' -focused' : '')
    }, startDateInputProps, {
      placeholder: "Start date"
    })), /*#__PURE__*/React.createElement("span", {
      className: "date-range_arrow"
    }), /*#__PURE__*/React.createElement("input", _extends({
      className: 'input' + (focus === END_DATE ? ' -focused' : '')
    }, endDateInputProps, {
      placeholder: "End date"
    })));
  });
};

export default memo(DatePicker);