"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.mapStateToProps = exports.MetricsTrendComponent = exports.MetricsTrend = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/toConsumableArray"));
var _react = _interopRequireWildcard(require("react"));
var _store = require("../../../redux/store");
var _recompose = require("recompose");
var _victory = require("victory");
var _bundleCommon = require("@kineticdata/bundle-common");
var _react2 = require("@kineticdata/react");
var _moment = _interopRequireDefault(require("moment"));
var _immutable = require("immutable");
var _excluded = ["error", "metrics"];
var toInt = function toInt(value) {
  return parseInt(value, 10) || 0;
};
var toPercentNumber = function toPercentNumber(a, b) {
  return b !== 0 ? Math.round(a / b * 100) : 0;
};
var Appointments = function Appointments(_ref) {
  var appointments = _ref.appointments,
    formatDate = _ref.formatDate;
  var _Object$keys$sort$red = Object.keys(appointments.total).sort().reduce(function (appts, date) {
      var scheduled = toInt(appointments.scheduled[date]);
      var walkins = toInt(appointments.walkins[date]);
      var total = toInt(appointments.total[date]);
      var scheduledPercentage = toPercentNumber(scheduled, total) || 0;
      var walkinsPercentage = toPercentNumber(walkins, total) || 0;
      appts.labelHeaders.push({
        x: formatDate(date),
        y: 0,
        label: "".concat(formatDate(date), "\n").concat(scheduledPercentage, "% Scheduled (").concat(scheduled, ")\n").concat(walkinsPercentage, "% Walk-Ins (").concat(walkins, ")")
      });
      appts.scheduled.push({
        x: formatDate(date),
        y: scheduledPercentage,
        _label: "".concat(scheduledPercentage, "% Scheduled (").concat(scheduled, ")")
      });
      appts.walkins.push({
        x: formatDate(date),
        y: walkinsPercentage,
        _label: "".concat(walkinsPercentage, "% Walk-Ins (").concat(walkins, ")")
      });
      return appts;
    }, {
      labelHeaders: [],
      scheduled: [],
      walkins: []
    }),
    scheduled = _Object$keys$sort$red.scheduled,
    walkins = _Object$keys$sort$red.walkins,
    labelHeaders = _Object$keys$sort$red.labelHeaders;
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "section__title"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Appointments")), /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    render: function render(translate) {
      return /*#__PURE__*/_react["default"].createElement(_victory.VictoryChart, {
        containerComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryVoronoiContainer, {
          className: "VictoryContainer max-height-350",
          style: {
            height: 'auto'
          },
          voronoiDimension: "x"
        }),
        width: 1500,
        height: 300,
        padding: {
          top: 50,
          left: 50,
          right: 70,
          bottom: 80
        },
        minDomain: {
          y: 0
        },
        maxDomain: {
          y: 100
        }
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryGroup, {
        colorScale: [_bundleCommon.Constants.COLORS.black, _bundleCommon.Constants.COLORS.blueSky, _bundleCommon.Constants.COLORS.sunflower]
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryScatter, {
        data: labelHeaders,
        size: 2,
        labelComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryTooltip, null)
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: scheduled,
        style: {
          data: {
            strokeWidth: 3
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: walkins,
        style: {
          data: {
            strokeWidth: 3
          }
        }
      })), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        style: {
          tickLabels: {
            angle: 45,
            verticalAnchor: 'middle',
            textAnchor: 'start',
            padding: 5,
            fontSize: 14
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        dependentAxis: true,
        tickFormat: function tickFormat(y) {
          return "".concat(y, "%");
        },
        style: {
          tickLabels: {
            padding: 5,
            fontSize: 14
          },
          ticks: {
            stroke: _bundleCommon.Constants.COLORS.black,
            size: 5
          }
        }
      }));
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "text-center"
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.blueSky
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Scheduled")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.sunflower
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Walk-Ins"))));
};
var Feedback = function Feedback(_ref2) {
  var feedback = _ref2.feedback,
    formatDate = _ref2.formatDate;
  var _Object$keys$sort$red2 = Object.keys(feedback.total).sort().reduce(function (appts, date) {
      var positive = toInt(feedback.positive[date]);
      var negative = toInt(feedback.negative[date]);
      var total = toInt(feedback.total[date]);
      var positivePercentage = toPercentNumber(positive, total) || 0;
      var negativePercentage = toPercentNumber(negative, total) || 0;
      appts.labelHeaders.push({
        x: formatDate(date),
        y: 0,
        label: "".concat(formatDate(date), "\n").concat(positivePercentage, "% Positive (").concat(positive, ")\n").concat(negativePercentage, "% Negative (").concat(negative, ")")
      });
      appts.positive.push({
        x: formatDate(date),
        y: positivePercentage
      });
      appts.negative.push({
        x: formatDate(date),
        y: negativePercentage
      });
      return appts;
    }, {
      labelHeaders: [],
      positive: [],
      negative: []
    }),
    positive = _Object$keys$sort$red2.positive,
    negative = _Object$keys$sort$red2.negative,
    labelHeaders = _Object$keys$sort$red2.labelHeaders;
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "section__title"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Feedback")), /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    render: function render(translate) {
      return /*#__PURE__*/_react["default"].createElement(_victory.VictoryChart, {
        containerComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryVoronoiContainer, {
          className: "VictoryContainer max-height-350",
          style: {
            height: 'auto'
          },
          voronoiDimension: "x"
        }),
        width: 1500,
        height: 300,
        padding: {
          top: 50,
          left: 50,
          right: 70,
          bottom: 80
        },
        minDomain: {
          y: 0
        },
        maxDomain: {
          y: 100
        }
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryGroup, {
        colorScale: [_bundleCommon.Constants.COLORS.black, _bundleCommon.Constants.COLORS.green, _bundleCommon.Constants.COLORS.red]
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryScatter, {
        data: labelHeaders,
        size: 2,
        labelComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryTooltip, null)
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: positive,
        style: {
          data: {
            strokeWidth: 3
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: negative,
        style: {
          data: {
            strokeWidth: 3
          }
        }
      })), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        style: {
          tickLabels: {
            angle: 45,
            verticalAnchor: 'middle',
            textAnchor: 'start',
            padding: 5,
            fontSize: 14
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        dependentAxis: true,
        tickFormat: function tickFormat(y) {
          return "".concat(y, "%");
        },
        style: {
          tickLabels: {
            padding: 5,
            fontSize: 14
          },
          ticks: {
            stroke: _bundleCommon.Constants.COLORS.black,
            size: 5
          }
        }
      }));
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "text-center"
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.green
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Positive")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.red
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Negative"))));
};
var Utilization = function Utilization(_ref3) {
  var utilization = _ref3.utilization,
    formatDate = _ref3.formatDate;
  var _Object$keys$sort$red3 = Object.keys(utilization.available).sort().reduce(function (utils, date) {
      var scheduled = toInt(utilization.scheduled[date]);
      var actual = toInt(utilization.actual[date]);
      var available = toInt(utilization.available[date]);
      var scheduledPercentage = toPercentNumber(scheduled, available) || 0;
      var actualPercentage = toPercentNumber(actual, available) || 0;
      utils.labelHeaders.push({
        x: formatDate(date),
        y: 0,
        label: "".concat(formatDate(date), "\n").concat(scheduledPercentage, "% Scheduled (").concat(scheduled, ")\n").concat(actualPercentage, "% Actual (").concat(actual, ")")
      });
      utils.scheduled.push({
        x: formatDate(date),
        y: scheduledPercentage
      });
      utils.actual.push({
        x: formatDate(date),
        y: actualPercentage
      });
      utils.maxY = Math.max(utils.maxY, scheduledPercentage, actualPercentage);
      return utils;
    }, {
      labelHeaders: [],
      scheduled: [],
      actual: [],
      maxY: 10
    }),
    scheduled = _Object$keys$sort$red3.scheduled,
    actual = _Object$keys$sort$red3.actual,
    labelHeaders = _Object$keys$sort$red3.labelHeaders,
    maxY = _Object$keys$sort$red3.maxY;
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "section__title"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Utilization")), /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    render: function render(translate) {
      return /*#__PURE__*/_react["default"].createElement(_victory.VictoryChart, {
        containerComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryVoronoiContainer, {
          className: "VictoryContainer max-height-350",
          style: {
            height: 'auto'
          },
          voronoiDimension: "x"
        }),
        width: 1500,
        height: 300,
        padding: {
          top: 50,
          left: 50,
          right: 70,
          bottom: 80
        },
        minDomain: {
          y: 0
        },
        maxDomain: {
          y: maxY
        }
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryGroup, {
        colorScale: [_bundleCommon.Constants.COLORS.black, _bundleCommon.Constants.COLORS.blueSky, _bundleCommon.Constants.COLORS.greenGrass]
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryScatter, {
        data: labelHeaders,
        size: 2,
        labelComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryTooltip, null)
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: scheduled,
        style: {
          data: {
            strokeWidth: 3
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: actual,
        style: {
          data: {
            strokeWidth: 3
          }
        }
      })), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        style: {
          tickLabels: {
            angle: 45,
            verticalAnchor: 'middle',
            textAnchor: 'start',
            padding: 5,
            fontSize: 14
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        dependentAxis: true,
        tickFormat: function tickFormat(y) {
          return "".concat(y, "%");
        },
        style: {
          tickLabels: {
            padding: 5,
            fontSize: 14
          },
          ticks: {
            stroke: _bundleCommon.Constants.COLORS.black,
            size: 5
          }
        }
      }));
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "text-center"
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.blueSky
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Scheduled")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.greenGrass
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Actual"))));
};
var Durations = function Durations(_ref4) {
  var durations = _ref4.durations,
    selectedDuration = _ref4.selectedDuration,
    setSelectedDuration = _ref4.setSelectedDuration,
    formatDate = _ref4.formatDate;
  var _ref5 = selectedDuration ? Object.keys(durations.data[selectedDuration.techBarId].eventTypes[selectedDuration.eventType].data).sort().reduce(function (result, date) {
      var eventType = durations.data[selectedDuration.techBarId].eventTypes[selectedDuration.eventType];
      var quantity = eventType.data[date].quantity;
      result.labelHeaders.push({
        x: formatDate(date),
        y: 0,
        label: "".concat(formatDate(date), "\nScheduled: ").concat(eventType.duration, " minutes\nActual: ").concat(quantity > 0 ? Math.round(eventType.data[date].actual / quantity) : 0, " minutes\nQuantity: ").concat(eventType.data[date].quantity)
      });
      result.scheduled.push({
        x: formatDate(date),
        y: eventType.duration
      });
      result.actual.push({
        x: formatDate(date),
        y: quantity > 0 ? Math.round(eventType.data[date].actual / quantity) : 0
      });
      result.waitTime.push({
        x: formatDate(date),
        y: quantity > 0 ? Math.round(eventType.data[date].waitTime / quantity) : 0
      });
      result.quantity.push({
        x: formatDate(date),
        y: eventType.data[date].quantity
      });
      return result;
    }, {
      labelHeaders: [],
      scheduled: [],
      actual: [],
      waitTime: [],
      quantity: []
    }) : {},
    labelHeaders = _ref5.labelHeaders,
    scheduled = _ref5.scheduled,
    actual = _ref5.actual,
    quantity = _ref5.quantity;
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "section__title"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Average Duration")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "duration-event-select"
  }, "Tech Bar and Event Type"), /*#__PURE__*/_react["default"].createElement("select", {
    name: "duration-event-select",
    id: "duration-event-select",
    className: "form-control",
    value: selectedDuration ? selectedDuration.value : '',
    onChange: function onChange(e) {
      return setSelectedDuration(durations.options.find(function (o) {
        return o.value === e.target.value;
      }));
    }
  }, /*#__PURE__*/_react["default"].createElement("option", null), durations.options.map(function (option) {
    return /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
      key: option.value,
      render: function render(translate) {
        return /*#__PURE__*/_react["default"].createElement("option", {
          value: option.value
        }, translate(option.techBarName), " ::", ' ', translate(option.eventType));
      }
    });
  }))), selectedDuration ? /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    render: function render(translate) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: "standalone-victory-group"
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryChart, {
        containerComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryContainer, {
          className: "VictoryContainer max-height-350",
          style: {
            height: 'auto'
          }
        }),
        width: 1500,
        height: 300,
        padding: {
          top: 50,
          left: 100,
          right: 70,
          bottom: 80
        },
        minDomain: {
          y: 0
        }
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryBar, {
        data: quantity,
        style: {
          data: {
            fill: _bundleCommon.Constants.COLORS.sunflower
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        dependentAxis: true,
        offsetX: 70,
        orientation: "right",
        tickFormat: function tickFormat(y) {
          return Math.round(y * 10) / 10;
        },
        style: {
          tickLabels: {
            padding: 5,
            fontSize: 14,
            fill: _bundleCommon.Constants.COLORS.sunflower
          },
          ticks: {
            stroke: _bundleCommon.Constants.COLORS.sunflower,
            size: 5
          },
          axis: {
            stroke: _bundleCommon.Constants.COLORS.sunflower
          }
        }
      })), /*#__PURE__*/_react["default"].createElement(_victory.VictoryChart, {
        containerComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryVoronoiContainer, {
          className: "VictoryContainer max-height-350",
          style: {
            height: 'auto'
          },
          voronoiDimension: "x"
        }),
        width: 1500,
        height: 300,
        padding: {
          top: 50,
          left: 100,
          right: 70,
          bottom: 80
        },
        minDomain: {
          y: 0
        }
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryGroup, {
        colorScale: [_bundleCommon.Constants.COLORS.black, _bundleCommon.Constants.COLORS.greenGrass, _bundleCommon.Constants.COLORS.blueSky]
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryScatter, {
        data: labelHeaders,
        size: 2,
        labelComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryTooltip, null)
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: scheduled,
        style: {
          data: {
            strokeDasharray: 4,
            strokeWidth: 3
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: actual,
        style: {
          data: {
            strokeWidth: 3
          }
        }
      })), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        style: {
          tickLabels: {
            angle: 45,
            verticalAnchor: 'middle',
            textAnchor: 'start',
            padding: 5,
            fontSize: 14
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        dependentAxis: true,
        tickFormat: function tickFormat(y) {
          return "".concat(y, " min");
        },
        style: {
          tickLabels: {
            padding: 5,
            fontSize: 14
          },
          ticks: {
            stroke: _bundleCommon.Constants.COLORS.black,
            size: 5
          }
        }
      })));
    }
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "text-center"
  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.greenGrass
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Scheduled Duration")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.blueSky
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Actual Duration")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-square fa-fw",
    style: {
      color: _bundleCommon.Constants.COLORS.sunflower
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Quantity")))) : /*#__PURE__*/_react["default"].createElement("div", {
    className: "text-info"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "The duration trend graph is only available once you select a Tech Bar and Event Type.", ' '), durations.options.length === 0 && /*#__PURE__*/_react["default"].createElement("strong", null, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "The selected Tech Bar does not have any Event Types."))));
};
var TimeOfVisit = function TimeOfVisit(_ref6) {
  var timeOfVisit = _ref6.timeOfVisit,
    formatDate = _ref6.formatDate,
    dates = _ref6.dates,
    timeOfVisitData = _ref6.timeOfVisitData,
    toggleTimeOfVisitData = _ref6.toggleTimeOfVisitData;
  var sourceData = timeOfVisitData ? timeOfVisit.scheduled : timeOfVisit.walkins;
  var graphData = Object.keys(sourceData).sort().reduce(function (tov, date) {
    var allTimes = [];
    Array(24).fill(0).forEach(function (_, hour) {
      if (sourceData[date][hour]) {
        tov.data.push({
          x: date,
          y: hour,
          size: (timeOfVisit.max > 15 ? sourceData[date][hour] / timeOfVisit.max * 15 : sourceData[date][hour]) + 2,
          label: "".concat(formatDate(date), "\n").concat((0, _moment["default"])(hour, 'H').format('LT'), "\n").concat(timeOfVisitData ? 'Scheduled' : 'Walk-Ins', ": ").concat(sourceData[date][hour])
        });
        allTimes.push.apply(allTimes, (0, _toConsumableArray2["default"])(Array(sourceData[date][hour]).fill(hour)));
      }
    });
    tov.median.push({
      x: date,
      y: allTimes.length > 0 ? allTimes.reduce(function (sum, time) {
        return sum + time;
      }, 0) / allTimes.length : 12
    });
    return tov;
  }, {
    data: [],
    median: []
  });
  return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "section__title"
  }, /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Time of Visit")), /*#__PURE__*/_react["default"].createElement("div", {
    className: "text-center"
  }, /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "time-of-visit-scheduled",
    className: "btn mr-2",
    style: {
      backgroundColor: _bundleCommon.Constants.COLORS.blueSky,
      color: _bundleCommon.Constants.COLORS.white,
      fontSize: '1rem',
      cursor: 'pointer'
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-".concat(timeOfVisitData ? 'check-' : '', "square fa-fw"),
    style: {
      color: _bundleCommon.Constants.COLORS.white
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Scheduled"), /*#__PURE__*/_react["default"].createElement("input", {
    type: "radio",
    name: "time-of-visit-radio",
    id: "time-of-visit-scheduled",
    className: "ml-1 collapse",
    checked: timeOfVisitData,
    onChange: function onChange() {
      return toggleTimeOfVisitData(!timeOfVisitData);
    }
  })), /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: "time-of-visit-walkins",
    className: "btn",
    style: {
      backgroundColor: _bundleCommon.Constants.COLORS.sunflower,
      color: _bundleCommon.Constants.COLORS.white,
      fontSize: '1rem',
      cursor: 'pointer'
    }
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "fa fa-".concat(!timeOfVisitData ? 'check-' : '', "square fa-fw"),
    style: {
      color: _bundleCommon.Constants.COLORS.white
    }
  }), /*#__PURE__*/_react["default"].createElement(_react2.I18n, null, "Walkins"), /*#__PURE__*/_react["default"].createElement("input", {
    type: "radio",
    name: "time-of-visit-radio",
    id: "time-of-visit-walkins",
    className: "ml-1 collapse",
    checked: !timeOfVisitData,
    onChange: function onChange() {
      return toggleTimeOfVisitData(!timeOfVisitData);
    }
  }))), /*#__PURE__*/_react["default"].createElement(_react2.I18n, {
    render: function render(translate) {
      return /*#__PURE__*/_react["default"].createElement(_victory.VictoryChart, {
        containerComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryContainer, {
          className: "VictoryContainer max-height-1000",
          style: {
            height: 'auto'
          }
        }),
        width: 1500,
        height: 1000,
        padding: {
          top: 50,
          left: 80,
          right: 70,
          bottom: 80
        },
        domainPadding: 17
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        tickValues: dates.sort(),
        tickFormat: function tickFormat(x) {
          return formatDate(x);
        },
        style: {
          tickLabels: {
            angle: 45,
            verticalAnchor: 'middle',
            textAnchor: 'start',
            padding: 10,
            fontSize: 14
          },
          ticks: {
            stroke: _bundleCommon.Constants.COLORS.black,
            size: 5
          },
          grid: {
            stroke: 'whitesmoke'
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryAxis, {
        dependentAxis: true,
        tickValues: Array(24).fill(0).map(function (_, i) {
          return i;
        }),
        tickFormat: function tickFormat(y) {
          return (0, _moment["default"])(y, 'H').format('LT');
        },
        style: {
          tickLabels: {
            padding: 5,
            fontSize: 14
          },
          ticks: {
            stroke: _bundleCommon.Constants.COLORS.black,
            size: 5
          },
          grid: {
            stroke: 'whitesmoke'
          }
        }
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryGroup, {
        colorScale: ['transparent', timeOfVisitData ? _bundleCommon.Constants.COLORS.blueSky : _bundleCommon.Constants.COLORS.sunflower]
      }, /*#__PURE__*/_react["default"].createElement(_victory.VictoryLine, {
        data: graphData.median,
        interpolation: "monotoneX"
      }), /*#__PURE__*/_react["default"].createElement(_victory.VictoryScatter, {
        data: graphData.data,
        labelComponent: /*#__PURE__*/_react["default"].createElement(_victory.VictoryTooltip, null)
      })));
    }
  }));
};
var MetricsTrendComponent = exports.MetricsTrendComponent = function MetricsTrendComponent(_ref7) {
  var error = _ref7.error,
    metrics = _ref7.metrics,
    data = (0, _objectWithoutProperties2["default"])(_ref7, _excluded);
  return /*#__PURE__*/_react["default"].createElement(_bundleCommon.StateListWrapper, {
    data: data,
    loading: !metrics,
    error: error
  }, function (_ref8) {
    var trend = _ref8.trend,
      techBars = _ref8.techBars,
      formatDate = _ref8.formatDate,
      dates = _ref8.dates,
      selectedDuration = _ref8.selectedDuration,
      setSelectedDuration = _ref8.setSelectedDuration,
      timeOfVisitData = _ref8.timeOfVisitData,
      toggleTimeOfVisitData = _ref8.toggleTimeOfVisitData;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "col-12 mb-5"
    }, /*#__PURE__*/_react["default"].createElement(Appointments, {
      appointments: trend.appointments,
      formatDate: formatDate
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "col-12 mb-5"
    }, /*#__PURE__*/_react["default"].createElement(Feedback, {
      feedback: trend.feedback,
      formatDate: formatDate
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "col-12 mb-5"
    }, /*#__PURE__*/_react["default"].createElement(Utilization, {
      utilization: trend.utilization,
      formatDate: formatDate
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "col-12 mb-5"
    }, /*#__PURE__*/_react["default"].createElement(Durations, {
      durations: trend.durations,
      formatDate: formatDate,
      selectedDuration: selectedDuration,
      setSelectedDuration: setSelectedDuration
    })), /*#__PURE__*/_react["default"].createElement("div", {
      className: "col-12 mb-5"
    }, /*#__PURE__*/_react["default"].createElement(TimeOfVisit, {
      timeOfVisit: trend.timeOfVisit,
      formatDate: formatDate,
      dates: dates,
      timeOfVisitData: timeOfVisitData,
      toggleTimeOfVisitData: toggleTimeOfVisitData
    })));
  });
};
var mapStateToProps = exports.mapStateToProps = function mapStateToProps(state, props) {
  return {
    error: state.metrics.error,
    metrics: state.metrics.data
  };
};
var TrendSummary = function TrendSummary() {
  var dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
  var techBars = arguments.length > 1 ? arguments[1] : undefined;
  var defaultMap = dates.reduce(function (map, date) {
    return map.set(date, 0);
  }, (0, _immutable.Map)());
  return {
    appointments: {
      scheduled: defaultMap.toJS(),
      walkins: defaultMap.toJS(),
      sameDay: defaultMap.toJS(),
      total: defaultMap.toJS()
    },
    feedback: {
      positive: defaultMap.toJS(),
      negative: defaultMap.toJS(),
      total: defaultMap.toJS()
    },
    utilization: {
      available: defaultMap.toJS(),
      actual: defaultMap.toJS(),
      scheduled: defaultMap.toJS()
    },
    timeOfVisit: {
      scheduled: defaultMap.map(function () {
        return Array(24).fill(0);
      }).toJS(),
      walkins: defaultMap.map(function () {
        return Array(24).fill(0);
      }).toJS(),
      max: 0
    },
    durations: {
      data: techBars ? techBars.reduce(function (d, t) {
        d[t.values['Id']] = {
          id: t.values['Id'],
          name: t.values['Name'],
          eventTypes: {}
        };
        return d;
      }, {}) : {},
      datesMap: defaultMap,
      options: []
    } // data: <schedulerId>.eventTypes.<eventType>.data.<date> = {}
  };
};

var buildTrend = function buildTrend(_ref9) {
  var setTrend = _ref9.setTrend,
    schedulerId = _ref9.schedulerId,
    eventType = _ref9.eventType,
    metrics = _ref9.metrics,
    dates = _ref9.dates,
    techBars = _ref9.techBars,
    selectedDuration = _ref9.selectedDuration,
    setSelectedDuration = _ref9.setSelectedDuration;
  return function () {
    if (!metrics) {
      return;
    }
    var records = schedulerId ? metrics.filter(function (m) {
      return m.schedulerId === schedulerId;
    }) : metrics;
    var trend = records.reduce(function (trend, _ref10) {
      var data = _ref10.data,
        period = _ref10.period,
        techBarId = _ref10.schedulerId;
      // Add total available minutes
      trend.utilization.available[period] += toInt(data.totalMinutesAvailable);
      // If event type is not specified, add feedback results not associated to events
      if (!eventType) {
        trend.feedback.positive[period] += toInt(data.feedback.Positive);
        trend.feedback.negative[period] += toInt(data.feedback.Negative);
        trend.feedback.total[period] += toInt(data.feedback.Positive) + toInt(data.feedback.Negative);
      }
      // Iterate through all the event types
      return data.eventTypes
      // If event type is selected, filter to only that type
      .filter(function (event) {
        return !eventType || eventType === event.type;
      }).reduce(function (t, event) {
        // Add appointment counts
        t.appointments.scheduled[period] += toInt(event.scheduledAppointments);
        t.appointments.walkins[period] += toInt(event.walkins);
        t.appointments.sameDay[period] += toInt(event.sameDayAppointments);
        t.appointments.total[period] += toInt(event.scheduledAppointments) + toInt(event.walkins);
        // Add feedback counts
        t.feedback.positive[period] += toInt(event.feedback.Positive);
        t.feedback.negative[period] += toInt(event.feedback.Negative);
        t.feedback.total[period] += toInt(event.feedback.Positive) + toInt(event.feedback.Negative);
        // Add total scheduled minutes and actual minutes
        t.utilization.scheduled[period] += parseInt(event.scheduledAppointments, 10) * toInt(event.duration);
        t.utilization.actual[period] += toInt(event.scheduledTotalDuration);
        // Add time of visit counts for scheduled appointments
        Object.keys(event.scheduledAppointmentTimes).forEach(function (time) {
          t.timeOfVisit.scheduled[period][toInt(time)] += toInt(event.scheduledAppointmentTimes[time]);
        });
        Object.keys(event.walkinAppointmentTimes).forEach(function (time) {
          t.timeOfVisit.walkins[period][toInt(time)] += toInt(event.walkinAppointmentTimes[time]);
        });
        t.timeOfVisit.max = Math.max.apply(Math, [t.timeOfVisit.max].concat((0, _toConsumableArray2["default"])(t.timeOfVisit.scheduled[period] || []), (0, _toConsumableArray2["default"])(t.timeOfVisit.walkins[period] || [])));
        // Add duration info
        if (t.durations.data[techBarId]) {
          if (!t.durations.data[techBarId].eventTypes[event.type]) {
            t.durations.data[techBarId].eventTypes[event.type] = {
              duration: event.duration,
              data: t.durations.datesMap.map(function () {
                return {
                  quantity: 0,
                  actual: 0,
                  waitTime: 0
                };
              }).toJS()
            };
          }
          var currentDuration = t.durations.data[techBarId].eventTypes[event.type];
          currentDuration.data[period].quantity += toInt(event.scheduledAppointments) + toInt(event.walkins);
          currentDuration.data[period].actual += toInt(event.walkinTotalDuration) + toInt(event.scheduledTotalDuration);
          currentDuration.data[period].waitTime += toInt(event.walkinTotalWaitTime) + toInt(event.scheduledTotalWaitTime);
        }
        return t;
      }, trend);
    }, TrendSummary(dates, techBars.filter(function (t) {
      return !schedulerId || t.values['Id'] === schedulerId;
    })));

    // Build options for duration select
    trend.durations.options = Object.keys(trend.durations.data).reduce(function (options, techBarId) {
      Object.keys(trend.durations.data[techBarId].eventTypes).forEach(function (eventType) {
        options.push({
          value: "".concat(techBarId, "||").concat(eventType),
          techBarId: techBarId,
          techBarName: trend.durations.data[techBarId].name,
          eventType: eventType
        });
      });
      return options;
    }, []);
    // Updated selectedDuration value if only a single value exists
    if (trend.durations.options.length === 1 && (!selectedDuration || selectedDuration.value !== trend.durations.options[0].value)) {
      setSelectedDuration(trend.durations.options[0]);
    }
    // If selectedDuration value is no longer valid, clear the value
    else if (selectedDuration && !trend.durations.options.find(function (o) {
      return o.value === selectedDuration.value;
    })) {
      setSelectedDuration(null);
    }
    setTrend(trend);
  };
};
var MetricsTrend = exports.MetricsTrend = (0, _recompose.compose)((0, _store.connect)(mapStateToProps), (0, _recompose.withState)('trend', 'setTrend', TrendSummary()), (0, _recompose.withState)('timeOfVisitData', 'toggleTimeOfVisitData', true), (0, _recompose.withState)('selectedDuration', 'setSelectedDuration', null), (0, _recompose.withHandlers)({
  buildTrend: buildTrend
}), (0, _recompose.lifecycle)({
  componentDidMount: function componentDidMount() {
    this.props.buildTrend();
  },
  componentDidUpdate: function componentDidUpdate(prevProps) {
    if (this.props.metrics !== prevProps.metrics) {
      this.props.buildTrend();
    }
  }
}))(MetricsTrendComponent);