import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import React__default, { useState } from 'react';
import { IconButton, Slider } from '@mui/material';
import DateRangePicker from '../../DatePicker/DateRangePicker/index.js';
import LiveStatusIcon from '../../Icons/LiveStatusIcon/index.js';
import PauseIcon from '../../Icons/PauseIcon/index.js';
import PlayIcon from '../../Icons/PlayIcon/index.js';
import BackwardArrowIcon from '../../Icons/BackwardArrowIcon/index.js';
import ForwardArrowIcon from '../../Icons/ForwardArrowIcon/index.js';
import CalendarIcon from '../../Icons/CalendarIcon/index.js';
import { PlaybackContainer, PlaybackIconContainer, PlaybackIconWrapper, IconButtonContainer, LiveStatusIconWrapper, PlaybackPlayContainer, PlaybackPlayIconWrapper, PlaybackIconButtonContainer, PlaybackDatePickerContainer, PlaybackDatePickerWrapper, PlaybackMediaContainer, PlayPauseIconContainer, PrettoSliderWrapper } from './style.js';
import { MapDataLabel, LiveStatus } from '../../Typography/Paragraph/index.js';
import theme from '../../../Globals/theme.js';
import { ThemeProvider } from 'styled-components';
import globalStyle from '../../../Globals/global-styles.js';

var Playback = function Playback() {
  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(true),
      _useState6 = _slicedToArray(_useState5, 2),
      showIcon = _useState6[0],
      setShowIcon = _useState6[1];

  var _useState7 = useState(false),
      _useState8 = _slicedToArray(_useState7, 2),
      showPlay = _useState8[0],
      setShowPlay = _useState8[1];

  var _onClick = function onClick() {
    setShowPlay(!showPlay);
  };

  var onDateSelect = function onDateSelect(date) {
    var _date$selectedDate = date.selectedDate,
        start = _date$selectedDate.startDate,
        end = _date$selectedDate.endDate;
    setStartDate(start);
    setEndDate(end);
  };

  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
    theme: theme
  }, /*#__PURE__*/React__default.createElement(globalStyle, null), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !showPlay ? /*#__PURE__*/React__default.createElement(PlaybackContainer, null, /*#__PURE__*/React__default.createElement(PlaybackIconContainer, null, /*#__PURE__*/React__default.createElement(PlaybackIconWrapper, null, /*#__PURE__*/React__default.createElement(IconButtonContainer, null, /*#__PURE__*/React__default.createElement(IconButton, {
    className: "IconButtons",
    onClick: _onClick
  }, /*#__PURE__*/React__default.createElement(PauseIcon, null))))), /*#__PURE__*/React__default.createElement(MapDataLabel, null, "Map Data"), /*#__PURE__*/React__default.createElement(LiveStatusIconWrapper, null, /*#__PURE__*/React__default.createElement(LiveStatusIcon, null)), /*#__PURE__*/React__default.createElement(LiveStatus, null, "Currently Live")) : null, showPlay ? /*#__PURE__*/React__default.createElement(PlaybackPlayContainer, null, /*#__PURE__*/React__default.createElement(PlaybackPlayIconWrapper, null, /*#__PURE__*/React__default.createElement(PlaybackIconButtonContainer, null, /*#__PURE__*/React__default.createElement(IconButton, {
    className: "PlayIconButtons",
    onClick: function onClick() {
      return _onClick();
    }
  }, /*#__PURE__*/React__default.createElement(PlayIcon, null)))), /*#__PURE__*/React__default.createElement(PlaybackDatePickerContainer, {
    className: [endDate && endDate !== "" ? "DatePickerContainerWithDate" : ""]
  }, /*#__PURE__*/React__default.createElement(PlaybackDatePickerWrapper, {
    className: [startDate && startDate !== "" && endDate && endDate !== "" ? "DatePickerWrapperWithDate" : ""]
  }, /*#__PURE__*/React__default.createElement(DateRangePicker, {
    onDateSelected: onDateSelect,
    buttonClassName: startDate && startDate !== "" && endDate && endDate !== "" ? "PlaybackDatePickerButton" : "",
    DatePickerTabItems: [{
      icon: /*#__PURE__*/React__default.createElement(CalendarIcon, null),
      value: "Today",
      label: "Today"
    }, {
      icon: /*#__PURE__*/React__default.createElement(CalendarIcon, null),
      value: "Week",
      label: "Week"
    }, {
      icon: /*#__PURE__*/React__default.createElement(CalendarIcon, null),
      value: "Month",
      label: "Month"
    }, {
      icon: /*#__PURE__*/React__default.createElement(CalendarIcon, null),
      value: "Year",
      label: "Year"
    }, {
      icon: /*#__PURE__*/React__default.createElement(CalendarIcon, null),
      value: "All Time",
      label: "All Time"
    }]
  })), /*#__PURE__*/React__default.createElement(PlaybackMediaContainer, {
    className: [endDate && endDate !== "" ? "PlaybackMediaContainerWithDate" : ""]
  }, /*#__PURE__*/React__default.createElement(BackwardArrowIcon, null), /*#__PURE__*/React__default.createElement(PlayPauseIconContainer, {
    onClick: function onClick() {
      return setShowIcon(!showIcon);
    }
  }, showIcon ? /*#__PURE__*/React__default.createElement(PlayIcon, null) : /*#__PURE__*/React__default.createElement(PauseIcon, null)), /*#__PURE__*/React__default.createElement(ForwardArrowIcon, null), /*#__PURE__*/React__default.createElement(PrettoSliderWrapper, null, /*#__PURE__*/React__default.createElement(Slider, {
    defaultValue: 30
  }))))) : null));
};

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