import React from 'react';
import PropTypes from 'prop-types';
import './style.css';

var getDayOfWeek = function getDayOfWeek() {
  var d = new Date();
  var weekday = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];

  return weekday[d.getDay()];
};
var currentDay = getDayOfWeek();

var OperationalHours = function OperationalHours(props) {
  var listing = props.listKey ? '--listing' : '';
  return React.createElement(
    'div',
    { className: 'ma__operational-hours' },
    React.createElement(
      'table',
      { className: 'ma__operational-hours-table' + listing },
      React.createElement(
        'tbody',
        null,
        props.hours && Object.entries(props.hours).map(function (_ref) {
          var key = _ref[0],
              value = _ref[1];

          var active = props.showActive && key === props.currentDay ? '--active' : '';
          var rowKey = props.listKey ? props.listKey + '-row-' + key : null;
          var status = typeof value.status !== 'undefined' && value.status !== null ? value.status : true;
          var time = '';
          var dateFormat = new Intl.DateTimeFormat('en-US', {
            hour12: true,
            hour: 'numeric',
            minute: 'numeric'
          });
          if (status === false) {
            time = 'Closed';
          } else {
            time = dateFormat.format(value.start) + ' - ' + dateFormat.format(value.end);
          }
          return React.createElement(
            'tr',
            {
              key: rowKey,
              className: 'ma__operational-hours-row' + active
            },
            React.createElement(
              'td',
              { className: 'ma__operational-hours-day' },
              key
            ),
            React.createElement(
              'td',
              { className: 'ma__operational-hours-time' },
              time
            )
          );
        })
      )
    )
  );
};

OperationalHours.propTypes = process.env.NODE_ENV !== "production" ? {
  /** An object that is keyed by the days of the week. Each day
      contains the following:
      status: represents an open or closed day of business for the week. If true, the business is open.
      start: The time the business opens.
      end: The time the business closes. */
  hours: PropTypes.shape({
    monday: PropTypes.shape({
      status: PropTypes.bool,
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    tuesday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    wednesday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    thursday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    friday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    saturday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    }),
    sunday: PropTypes.shape({
      start: PropTypes.instanceOf(Date),
      end: PropTypes.instanceOf(Date)
    })
  }).isRequired,
  /** Whether to show if currently active or not. */
  showActive: PropTypes.bool,
  /** A unique string used for generating the display of days for week. */
  listKey: PropTypes.string.isRequired,
  /** Current day for the week that gets highlighted. */
  currentDay: PropTypes.string
} : {};

OperationalHours.defaultProps = {
  showActive: true,
  currentDay: currentDay
};

export default OperationalHours;