"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _nativeDispatch = _interopRequireDefault(require("../../../core/utils/nativeDispatch"));

var _Flex = _interopRequireDefault(require("../../components/Flex"));

var _Box = _interopRequireDefault(require("../../components/Box"));

var _Button = _interopRequireDefault(require("../../components/Button"));

var _Dropdown = _interopRequireDefault(require("../../components/Dropdown"));

/* eslint-disable no-bitwise */
// Style
var classes = {};
/* istanbul ignore next */

if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = {
  "slate": "#384248",
  "blue": "#118CFD",
  "green": "#12CA93",
  "red": "#E95F6A",
  "yellow": "#F7C543",
  "purple": "#8470BE",
  "graphite": "#4F5A66",
  "shale": "#939EAE",
  "chalk": "#c6cbd3",
  "ivory": "#F0F0F0",
  "lightGray": "#F8F8F8",
  "white": "#FFF",
  "MetricsDateRange": "_3tyD6-MetricsDateRange",
  "MetricsDateRange-quickSet": "_2wKIi-MetricsDateRange-quickSet",
  "MetricsDateRange-quickSet--paywall": "_2F3W--MetricsDateRange-quickSet--paywall"
};

var MetricsDateRange = function MetricsDateRange(props) {
  var menu = /*#__PURE__*/_react["default"].createRef();

  var paywalled = props.paywalled;

  var _useState = (0, _react.useState)(paywalled ? 1 : props.timeAgo),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      timeAgo = _useState2[0],
      setTimeAgo = _useState2[1];

  var labels = {
    1: 'day',
    7: 'week',
    30: 'month'
  };

  var paywallClassMod = function paywallClassMod(val) {
    if (paywalled && val !== '1') return '--paywall';
    return '';
  };

  var handleClick = function handleClick(event, value) {
    var displayValue = value;
    if (paywalled && value !== '1') displayValue = '1';else menu.current.toggle(false); // running setTimeAgo here instead of in nativeDispatch because the value
    // we set in this component is different than the one we dispatch to the
    // angular directive.

    setTimeAgo(displayValue);
    return (0, _nativeDispatch["default"])(event, null, value);
  };

  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
    align: "center",
    className: classes.MetricsDateRange,
    justify: "start"
  }, /*#__PURE__*/_react["default"].createElement("span", null, "Viewing metrics for the last:"), /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], {
    ref: menu,
    align: "start",
    justify: "center"
  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
    bem: {
      blue_ghost: true
    },
    className: "MetricsDateRange"
  }, /*#__PURE__*/_react["default"].createElement("i", {
    className: "fa fa-calendar fa-calendar-alt"
  }), '  ', labels[timeAgo], "\xA0", /*#__PURE__*/_react["default"].createElement("i", {
    className: "fa fas fa-chevron-down fa-xs",
    style: {
      fontSize: '.8em'
    }
  })), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    bem: [['pop']]
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "Flex Flex_col",
    style: {
      margin: 0
    }
  }, Object.keys(labels).map(function (i) {
    return /*#__PURE__*/_react["default"].createElement("span", {
      key: "choose-daterange-".concat(i),
      className: classes["MetricsDateRange-quickSet".concat(paywallClassMod(i))],
      onClick: function onClick(e) {
        return handleClick(e, i);
      },
      onKeyDown: function onKeyDown(e) {
        return e.key === 'Enter' && e.preventDefault() | handleClick(e, i);
      },
      role: "button",
      tabIndex: 0
    }, "last ", labels[i]);
  })))));
};

MetricsDateRange.propTypes = {
  paywalled: _propTypes["default"].bool,
  timeAgo: _propTypes["default"].oneOf([1, 7, 30])
};
MetricsDateRange.defaultProps = {
  paywalled: false,
  timeAgo: 1
};
var _default = MetricsDateRange;
exports["default"] = _default;