import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState, useRef } from 'react';
import { Button, Tabs, Tab } from '@mui/material';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import DatePickerAfterArrowIcon from '../../Icons/DatePickerAfterArrowIcon/index.js';
import DatePickerPreviousArrowIcon from '../../Icons/DatePickerPreviousArrowIcon/index.js';
import CalendarIcon from '../../Icons/CalendarIcon/index.js';
import ClockIcon from '../../Icons/ClockIcon/index.js';
import { DatePickerButtonWrapper, DatePickerContainer, DatePickerSettingPanelContainer, DatePickerSettingPanelWrapper, DatePickerSettingPanelScreen, DatePickerWrapper, TimeContainer, DateTimeWrapper, TimeSelect } from './style.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';

var DateRangePicker = function DateRangePicker(_ref) {
  var onDateSelected = _ref.onDateSelected,
      buttonClassName = _ref.buttonClassName,
      input = _ref.input,
      tabs = _ref.tabs;

  var _useState = useState(null),
      _useState2 = _slicedToArray(_useState, 2),
      startDate = _useState2[0],
      setStartDate = _useState2[1];

  var _useState3 = useState(null),
      _useState4 = _slicedToArray(_useState3, 2),
      endDate = _useState4[0],
      setEndDate = _useState4[1];

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

  function getClass() {
    console.log("startDate:- ".concat(startDate, ", endDate:- ").concat(endDate));
    var className = "";
    if (startDate && startDate !== "" && endDate && endDate !== "") className = "DatePickerButtonWithDate";else className = "";
    if (buttonClassName) className = buttonClassName;else className = "";
    return "DatePickerButton ".concat(className);
  }

  console.log("getClass :-", getClass());

  var onChange = function onChange(dates) {
    var _dates = _slicedToArray(dates, 2),
        start = _dates[0],
        end = _dates[1];

    setStartDate(start);
    setEndDate(end);

    if (onDateSelected) {
      onDateSelected({
        selectedDate: {
          startDate: start ? "".concat(new Date(start).getDate(), "/").concat(new Date(start).getMonth() + 1, "/").concat(new Date(start).getFullYear()) : null,
          endDate: end ? "".concat(new Date(end).getDate(), "/").concat(new Date(end).getMonth() + 1, "/").concat(new Date(end).getFullYear()) : null
        }
      });
    }
  };

  var _useState7 = useState("Today"),
      _useState8 = _slicedToArray(_useState7, 2),
      value = _useState8[0],
      setValue = _useState8[1];

  var datepickerRef = useRef(null);

  var handleChange = function handleChange(event, newValue) {
    console.log(newValue);
    setValue(newValue);
    setStartDate("");
    setEndDate("");

    if (onDateSelected) {
      onDateSelected({
        selectedDate: value
      });
    }
  };

  var openDatePicker = function openDatePicker() {
    setDatePicker(!showDatePicker);
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DatePickerButtonWrapper, null, /*#__PURE__*/React__default.createElement(Button, {
    className: getClass(),
    endIcon: /*#__PURE__*/React__default.createElement(CalendarIcon, null),
    disableRipple: true,
    onClick: openDatePicker
  }, /*#__PURE__*/React__default.createElement("span", null, startDate && startDate !== "" && endDate && endDate !== "" ? "".concat(new Date(startDate).getDate(), "/").concat(new Date(startDate).getMonth() + 1, "/").concat(new Date(startDate).getFullYear(), " - ").concat(new Date(endDate).getDate(), "/").concat(new Date(endDate).getMonth() + 1, "/").concat(new Date(endDate).getFullYear()) : value))), showDatePicker ? /*#__PURE__*/React__default.createElement(DatePickerContainer, {
    innerRef: datepickerRef
  }, /*#__PURE__*/React__default.createElement(DatePickerSettingPanelContainer, null, /*#__PURE__*/React__default.createElement(DatePickerSettingPanelWrapper, null, /*#__PURE__*/React__default.createElement(Tabs, {
    value: value,
    onChange: handleChange,
    orientation: "vertical"
  }, tabs.map(function (DatePickerTabItem) {
    return /*#__PURE__*/React__default.createElement(Tab, {
      icon: DatePickerTabItem.icon,
      value: DatePickerTabItem.value,
      label: DatePickerTabItem.label
    });
  }))), /*#__PURE__*/React__default.createElement(DatePickerSettingPanelScreen, null, /*#__PURE__*/React__default.createElement(DatePickerWrapper, null, /*#__PURE__*/React__default.createElement(DatePicker, {
    formatWeekDay: function formatWeekDay(nameOfDay) {
      return nameOfDay.substr(0, 1);
    },
    renderCustomHeader: function renderCustomHeader(_ref2) {
      var monthDate = _ref2.monthDate;
          _ref2.customHeaderCount;
          var decreaseMonth = _ref2.decreaseMonth,
          increaseMonth = _ref2.increaseMonth;
      return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("span", {
        "aria-label": "Previous Month",
        className: "react-datepicker__navigation react-datepicker__navigation--previous",
        onClick: decreaseMonth
      }, /*#__PURE__*/React__default.createElement(DatePickerPreviousArrowIcon, null)), /*#__PURE__*/React__default.createElement("span", {
        className: "react-datepicker__current-month"
      }, monthDate.toLocaleString("en-US", {
        month: "long",
        year: "numeric"
      })), /*#__PURE__*/React__default.createElement("span", {
        "aria-label": "Next Month",
        className: "react-datepicker__navigation react-datepicker__navigation--next",
        onClick: increaseMonth
      }, /*#__PURE__*/React__default.createElement(DatePickerAfterArrowIcon, null)));
    },
    customInput: input,
    selected: startDate,
    startDate: startDate,
    endDate: endDate,
    selectsRange: true,
    onChange: onChange,
    monthsShown: 2,
    inline: true
  }), /*#__PURE__*/React__default.createElement(TimeContainer, null, /*#__PURE__*/React__default.createElement(DateTimeWrapper, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TimeSelect, null, /*#__PURE__*/React__default.createElement("option", {
    value: "00"
  }, "00")), /*#__PURE__*/React__default.createElement("span", null, ":"), /*#__PURE__*/React__default.createElement(TimeSelect, null, /*#__PURE__*/React__default.createElement("option", {
    value: "00"
  }, "00")), /*#__PURE__*/React__default.createElement("span", null, ":"), /*#__PURE__*/React__default.createElement(TimeSelect, null, /*#__PURE__*/React__default.createElement("option", {
    value: "AM"
  }, "AM"), /*#__PURE__*/React__default.createElement("option", {
    value: "PM"
  }, "PM"))), /*#__PURE__*/React__default.createElement(ClockIcon, null)), /*#__PURE__*/React__default.createElement(DateTimeWrapper, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(TimeSelect, null, /*#__PURE__*/React__default.createElement("option", {
    value: "00"
  }, "00")), /*#__PURE__*/React__default.createElement("span", null, ":"), /*#__PURE__*/React__default.createElement(TimeSelect, null, /*#__PURE__*/React__default.createElement("option", {
    value: "00"
  }, "00")), /*#__PURE__*/React__default.createElement("span", null, ":"), /*#__PURE__*/React__default.createElement(TimeSelect, null, /*#__PURE__*/React__default.createElement("option", {
    value: "AM"
  }, "AM"), /*#__PURE__*/React__default.createElement("option", {
    value: "PM"
  }, "PM"))), /*#__PURE__*/React__default.createElement(ClockIcon, null))))))) : null));
};

export { DateRangePicker as default };
//# sourceMappingURL=index.js.map
