/* eslint-disable no-bitwise */
import classes from './style.module.scss';

import React, { useState } from 'react';
import PropTypes from 'prop-types';

import dispatch from '../../../core/utils/nativeDispatch';

import Flex from '../../components/Flex';
import Box from '../../components/Box';
import Button from '../../components/Button';
import Dropdown from '../../components/Dropdown';

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

var MetricsDateRange = function MetricsDateRange(props) {
  var menu = React.createRef();
  var paywalled = props.paywalled;

  var _useState = 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 dispatch(event, null, value);
  };
  return React.createElement(
    Flex,
    { align: 'center', className: classes.MetricsDateRange, justify: 'start' },
    React.createElement(
      'span',
      null,
      'Viewing metrics for the last:'
    ),
    React.createElement(
      Dropdown,
      { ref: menu, align: 'start', justify: 'center' },
      React.createElement(
        Button,
        { bem: { blue_ghost: true }, className: 'MetricsDateRange' },
        React.createElement('i', { className: 'fa fa-calendar fa-calendar-alt' }),
        '  ',
        labels[timeAgo],
        '\xA0',
        React.createElement('i', { className: 'fa fas fa-chevron-down fa-xs', style: { fontSize: '.8em' } })
      ),
      React.createElement(
        Box,
        { bem: [['pop']] },
        React.createElement(
          'div',
          { className: 'Flex Flex_col', style: { margin: 0 } },
          Object.keys(labels).map(function (i) {
            return React.createElement(
              'span',
              {
                key: 'choose-daterange-' + i,
                className: classes['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: PropTypes.bool,
  timeAgo: PropTypes.oneOf([1, 7, 30])
} : {};

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

export default MetricsDateRange;