import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["bordered", "className", "modifiers", "size", "withMonthPicker", "showWeekNumbers", "onChange"];
import React, { useState } from 'react';
import DayPicker from 'react-day-picker';
import Box, { pickBoxProps } from '../box';
import NavigationBar from './NavigationBar';
import WeekDay from './WeekDay';
import MonthPicker from './MonthPicker';
import { convertModifiersToClassnames } from './utils';
import cx from 'classnames';
import theme from './theme.css';
import uiUtilities from '@teamleader/ui-utilities';
import localeUtils from './localeUtils';

var DatePicker = function DatePicker(_ref) {
  var _ref$bordered = _ref.bordered,
      bordered = _ref$bordered === void 0 ? true : _ref$bordered,
      className = _ref.className,
      modifiers = _ref.modifiers,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      withMonthPicker = _ref.withMonthPicker,
      showWeekNumbers = _ref.showWeekNumbers,
      onChange = _ref.onChange,
      others = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(others.selectedDate),
      _useState2 = _slicedToArray(_useState, 2),
      selectedDate = _useState2[0],
      setSelectedDate = _useState2[1];

  var _useState3 = useState(),
      _useState4 = _slicedToArray(_useState3, 2),
      selectedMonth = _useState4[0],
      setSelectedMonth = _useState4[1];

  var handleDayClick = function handleDayClick(day, modifiers) {
    if (modifiers[theme['disabled']]) {
      return;
    }

    setSelectedDate(day);
    onChange && onChange(day);
  };

  var handleYearMonthChange = function handleYearMonthChange(selectedMonth) {
    setSelectedMonth(selectedMonth);
  };

  var getMonthPickerSize = function getMonthPickerSize() {
    var monthPickerSizeByDatePickerSize = {
      small: 'smallest',
      medium: showWeekNumbers ? 'medium' : 'small',
      large: 'large'
    };
    return monthPickerSizeByDatePickerSize[size];
  };

  var classNames = cx(uiUtilities['reset-font-smoothing'], theme['date-picker'], theme["is-".concat(size)], _defineProperty({}, theme['is-bordered'], bordered), className);
  return /*#__PURE__*/React.createElement(Box, pickBoxProps(others), /*#__PURE__*/React.createElement(DayPicker, _extends({}, others, {
    localeUtils: localeUtils,
    initialMonth: others.selectedDate,
    month: selectedMonth,
    className: classNames,
    classNames: theme,
    modifiers: modifiers && convertModifiersToClassnames(modifiers, theme),
    navbarElement: function navbarElement(_ref2) {
      var props = _extends({}, _ref2);

      return /*#__PURE__*/React.createElement(NavigationBar, _extends({}, props, {
        size: size,
        withMonthPicker: withMonthPicker
      }));
    },
    onDayClick: handleDayClick,
    selectedDays: selectedDate,
    weekdayElement: function weekdayElement(_ref3) {
      var props = _extends({}, _ref3);

      return /*#__PURE__*/React.createElement(WeekDay, _extends({}, props, {
        size: size
      }));
    },
    showWeekNumbers: showWeekNumbers,
    captionElement: withMonthPicker ? function (_ref4) {
      var date = _ref4.date,
          locale = _ref4.locale,
          localeUtils = _ref4.localeUtils;
      return /*#__PURE__*/React.createElement(MonthPicker, {
        date: date,
        locale: locale,
        localeUtils: localeUtils,
        onChange: handleYearMonthChange,
        size: getMonthPickerSize()
      });
    } : undefined
  })));
};

export default DatePicker;