import React, { useContext } from 'react';
import { getKey } from '../../helpers';
import { StyledHours } from './partials/StyledHours';
import { DISPLAY_THRESHOLDS } from './constants';
import { TimelineContext } from './context';
import { TimelineColumnHeader } from './TimelineColumnHeader';
import { TimelineHour } from './TimelineHour';
import { TimelineHeaderRow } from './TimelineHeaderRow';
export var TimelineHours = function TimelineHours(_ref) {
  var render = _ref.render;
  var _useContext = useContext(TimelineContext),
    state = _useContext.state;
  var currentScaleOption = state.currentScaleOption,
    days = state.days,
    hours = state.hours;
  if (!currentScaleOption) {
    return null;
  }
  var isBelowThreshold = currentScaleOption.widths.hour < DISPLAY_THRESHOLDS.HOUR;
  if (!hours || hours.length === 1) {
    return null;
  }
  var rowChildren = isBelowThreshold ? /*#__PURE__*/React.createElement(TimelineColumnHeader, {
    name: "No hours"
  }) : /*#__PURE__*/React.createElement(StyledHours, null, days.map(function (_ref2) {
    var date = _ref2.date;
    return hours.map(function (_ref3) {
      var hourIndex = _ref3.hourIndex,
        time = _ref3.time;
      return /*#__PURE__*/React.createElement(TimelineHour, {
        date: date,
        key: getKey('timeline-hour', "".concat(date.toString(), "-").concat(hourIndex)),
        render: render,
        time: time,
        timelineEndDate: currentScaleOption.to,
        width: currentScaleOption.widths.hour
      });
    });
  }));
  return /*#__PURE__*/React.createElement(TimelineHeaderRow, {
    className: "timeline__hours",
    isShort: true,
    name: "Hours"
  }, rowChildren);
};
TimelineHours.displayName = 'TimelineHours';