"use strict";
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Pie = require("paths-js/pie");
var styled_components_1 = require("styled-components");
var map = require("lodash/map");
var recompose_1 = require("recompose");
var utils_1 = require("../utils");
var hoc_1 = require("../hoc");
var theme_1 = require("../theme");
var font = theme_1.default.font;
var StatusGaugeWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  color: ", ";\n\n  /* fix edge hover missplacing bug\n    on svg text inside anchors\n  */\n  &,\n  &:hover {\n    text-decoration: none;\n\n    text {\n      text-decoration: none !important;\n    }\n\n    .gauge__graph__total-label {\n      transform: translateX(0);\n    }\n  }\n\n  .gauge__graph {\n    display: block;\n    width: 100%;\n    max-width: 180px;\n    margin: 0 auto 10px;\n  }\n\n  .gauge__graph__total-label {\n    font-family: ", ";\n    font-size: 5px;\n    fill: #b8b8b8;\n    text-anchor: middle;\n  }\n\n  .gauge__legend {\n    list-style: none;\n    padding: 5px;\n    margin: 0 auto;\n    background: white;\n    border-radius: 5px;\n    max-width: 240px;\n    border: 1px solid #ececec;\n    overflow: hidden;\n  }\n\n  .gauge__legend-item {\n    display: flex;\n    padding: 3px 0 3px 2px;\n    line-height: 9px;\n    width: 50%;\n    float: left;\n  }\n\n  .gauge__legend-color {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 10px;\n    height: 10px;\n    margin-right: 4px;\n  }\n\n  .gauge__legend-name {\n    font-size: 11px;\n  }\n"], ["\n  display: block;\n  color: ", ";\n\n  /* fix edge hover missplacing bug\n    on svg text inside anchors\n  */\n  &,\n  &:hover {\n    text-decoration: none;\n\n    text {\n      text-decoration: none !important;\n    }\n\n    .gauge__graph__total-label {\n      transform: translateX(0);\n    }\n  }\n\n  .gauge__graph {\n    display: block;\n    width: 100%;\n    max-width: 180px;\n    margin: 0 auto 10px;\n  }\n\n  .gauge__graph__total-label {\n    font-family: ", ";\n    font-size: 5px;\n    fill: #b8b8b8;\n    text-anchor: middle;\n  }\n\n  .gauge__legend {\n    list-style: none;\n    padding: 5px;\n    margin: 0 auto;\n    background: white;\n    border-radius: 5px;\n    max-width: 240px;\n    border: 1px solid #ececec;\n    overflow: hidden;\n  }\n\n  .gauge__legend-item {\n    display: flex;\n    padding: 3px 0 3px 2px;\n    line-height: 9px;\n    width: 50%;\n    float: left;\n  }\n\n  .gauge__legend-color {\n    display: inline-block;\n    flex: 0 0 auto;\n    width: 10px;\n    height: 10px;\n    margin-right: 4px;\n  }\n\n  .gauge__legend-name {\n    font-size: 11px;\n  }\n"])), function (_a) {
    var theme = _a.theme;
    return theme.colors.text.main;
}, font);
var GaugeTotalText = styled_components_1.default.text(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  fill: #5e5e5e;\n  letter-spacing: -1px;\n  text-anchor: middle;\n  transform: translateX(0);\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  fill: #5e5e5e;\n  letter-spacing: -1px;\n  text-anchor: middle;\n  transform: translateX(0);\n"])), font, function (props) { return utils_1.px(props.count > 999 ? 20 : 26); });
var GaugeTotal = function (_a) {
    var count = _a.count, props = __rest(_a, ["count"]);
    return (React.createElement(GaugeTotalText, __assign({ count: count }, props), count));
};
var StatusGauge = function (_a) {
    var _b = _a.placeholderColor, placeholderColor = _b === void 0 ? theme_1.default.colors.gray.light : _b, legend = _a.legend, data = _a.data, title = _a.title, props = __rest(_a, ["placeholderColor", "legend", "data", "title"]);
    var count = data.reduce(function (carry, item) {
        return carry + item.value;
    }, 0);
    var graph = Pie({
        accessor: function (item) { return item.value; },
        center: [0, 0],
        data: data,
        R: 46,
        r: 25
    });
    var gauge = graph.curves;
    return (React.createElement(StatusGaugeWrapper, __assign({}, props),
        React.createElement("svg", { className: 'gauge__graph', viewBox: '0 0 100 100', xmlns: 'http://www.w3.org/2000/svg' },
            React.createElement("circle", { fill: ' white', stroke: '#dadada', strokeWidth: '5', cx: '50', cy: '50', r: '46' }),
            React.createElement("g", null,
                React.createElement("circle", { fill: placeholderColor, cx: '50', cy: '50', r: '46' }),
                React.createElement("circle", { fill: 'white', cx: '50', cy: '50', r: '25' })),
            React.createElement("g", { transform: 'translate(50, 50)' }, map(gauge, function (segment) {
                if (!count) {
                    return;
                }
                if (segment.item.value === count) {
                    return (React.createElement("g", { key: segment.item.key || segment.item.name },
                        React.createElement("path", { transform: 'translate(-100, -100)', fill: segment.item.color, d: 'M100 100m-46,0a46,46,0 1,0 92,0a 46,46 0 1,0 -92,0zM100 100m-25,0a25,25,0 0,1 50,0a 25,25 0 0,1 -50,0z' })));
                }
                return (React.createElement("g", { key: segment.item.key || segment.item.name },
                    React.createElement("path", { fill: segment.item.color, d: segment.sector.path.print() })));
            })),
            React.createElement("text", { className: 'gauge__graph__total-label', x: '50', y: '41' }, title ? " " + title.toUpperCase() : 'TOTAL'),
            React.createElement(GaugeTotal, { x: '50', y: '63', count: count })),
        React.createElement("ul", { className: 'gauge__legend' }, map(data, function (item) {
            return (React.createElement("li", { key: item.key || item.name, className: "gauge__legend-item" },
                React.createElement("span", { className: "gauge__legend-color", style: { backgroundColor: item.color } }, "\u00A0"),
                React.createElement("span", { className: 'gauge__legend-name' }, item.name)));
        }))));
};
exports.default = recompose_1.compose(styled_components_1.withTheme, hoc_1.default)(StatusGauge);
var templateObject_1, templateObject_2;
