'use strict';

exports.__esModule = true;

var _styleModule = require('./style.module.scss');

var _styleModule2 = _interopRequireDefault(_styleModule);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _nativeDispatch2 = _interopRequireDefault(_nativeDispatch);

var _Flex = require('../../components/Flex');

var _Flex2 = _interopRequireDefault(_Flex);

var _Box = require('../../components/Box');

var _Box2 = _interopRequireDefault(_Box);

var _Button = require('../../components/Button');

var _Button2 = _interopRequireDefault(_Button);

var _Dropdown = require('../../components/Dropdown');

var _Dropdown2 = _interopRequireDefault(_Dropdown);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// import Icon from './icon.svg';

/* eslint-disable no-bitwise */
var MetricsDateRange = function MetricsDateRange(props) {
  var menu = _react2.default.createRef();
  var paywalled = props.paywalled;

  var _useState = (0, _react.useState)(paywalled ? 1 : props.timeAgo),
      timeAgo = _useState[0],
      setTimeAgo = _useState[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, _nativeDispatch2.default)(event, null, value);
  };
  return _react2.default.createElement(
    _Flex2.default,
    { align: 'center', className: _styleModule2.default.MetricsDateRange, justify: 'start' },
    _react2.default.createElement(
      'span',
      null,
      'Viewing metrics for the last:'
    ),
    _react2.default.createElement(
      _Dropdown2.default,
      { ref: menu, align: 'start', justify: 'center' },
      _react2.default.createElement(
        _Button2.default,
        { bem: { blue_ghost: true }, className: 'MetricsDateRange' },
        _react2.default.createElement('i', { className: 'fa fa-calendar fa-calendar-alt' }),
        '  ',
        labels[timeAgo],
        '\xA0',
        _react2.default.createElement('i', { className: 'fa fas fa-chevron-down fa-xs', style: { fontSize: '.8em' } })
      ),
      _react2.default.createElement(
        _Box2.default,
        { bem: [['pop']] },
        _react2.default.createElement(
          'div',
          { className: 'Flex Flex_col', style: { margin: 0 } },
          Object.keys(labels).map(function (i) {
            return _react2.default.createElement(
              'span',
              {
                key: 'choose-daterange-' + i,
                className: _styleModule2.default['MetricsDateRange-quickSet' + 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 = process.env.NODE_ENV !== "production" ? {
  paywalled: _propTypes2.default.bool,
  timeAgo: _propTypes2.default.oneOf([1, 7, 30])
} : {};

MetricsDateRange.defaultProps = {
  paywalled: false,
  timeAgo: 1
};

exports.default = MetricsDateRange;
module.exports = exports['default'];