"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
Object.defineProperty(exports, "__esModule", { value: true });
var d3 = require("d3");
var _ = require("lodash");
var D3Chart_1 = require("../D3Chart");
var common_1 = require("../common");
var utils_1 = require("../../utils");
var default_1 = /** @class */ (function (_super) {
    __extends(default_1, _super);
    function default_1() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.__ClassName = '_vc_bar_top3';
        return _this;
    }
    default_1.prototype.sort = function () {
        var _this = this;
        this.heightItem = this.HEIGHT / (this.props.maxCount + 1);
        var data = [[], []];
        var _a = __read(this.props.data, 2), list1 = _a[0], list2 = _a[1];
        _.map(list1, function (d) { return data[0].push({ name: d[_this.props.labelField[0]], value: parseFloat(d[_this.props.valueField[0]]) }); });
        _.map(list2, function (d) { return data[1].push({ name: d[_this.props.labelField[1]], value: parseFloat(d[_this.props.valueField[1]]) }); });
        this.DATA = data;
        var _b = __read([_.maxBy(data[0], "value"), _.minBy(data[0], "value"), _.maxBy(data[1], "value"), _.minBy(data[1], "value")], 4), max1 = _b[0], min1 = _b[1], max2 = _b[2], min2 = _b[3];
        this.barScale1 = d3.scaleLinear().rangeRound([this.WIDTH * 0.25, this.WIDTH * 0.45]).domain([min1.value, max1.value]);
        this.barScale2 = d3.scaleLinear().rangeRound([this.WIDTH * 0.25, this.WIDTH * 0.45]).domain([min2.value, max2.value]);
        if (list1.length < this.props.maxCount && list2.length < this.props.maxCount) {
            var count = list1.length > list2.length ? list1.length : list2.length;
            this.heightItem = this.HEIGHT / (count + 1);
        }
    };
    default_1.prototype.resize = function () {
        var _this = this;
        var _a = __read(this.props.data, 2), list1 = _a[0], list2 = _a[1];
        if (list1.length < this.props.maxCount && list2.length < this.props.maxCount) {
            var count = list1.length > list2.length ? list1.length : list2.length;
            this.heightItem = this.HEIGHT / (count + 1);
        }
        else {
            this.heightItem = this.HEIGHT / (this.props.maxCount + 1);
        }
        var leftEnter = this.SVG.selectAll("g._leftitem")
            .attr('transform', function (d, i) { return "translate(0," + _this.heightItem * (i + 0.5) + ")"; });
        var rightEnter = this.SVG.selectAll("g._rightitem")
            .attr('transform', function (d, i) { return "translate(0," + _this.heightItem * (i + 0.5) + ")"; });
        leftEnter.select("rect")
            .attr('x', function (d) { return _this.WIDTH / 2 - _this.barScale1(d["value"]); })
            .attr('y', this.heightItem * 0.5)
            .attr("width", function (d) { return _this.barScale1(d["value"]); });
        leftEnter.select("text.value")
            .attr('x', 0)
            .attr('y', this.heightItem * 0.5 - 5);
        leftEnter.select("text.name")
            .attr('y', this.heightItem * 0.5)
            .attr('x', this.WIDTH / 2);
        rightEnter.select("rect")
            .attr('x', this.WIDTH / 2)
            .attr('y', this.heightItem * 0.5)
            .attr("width", function (d) { return _this.barScale2(d["value"]); });
        rightEnter.select("text.value")
            .attr('x', this.WIDTH)
            .attr('y', this.heightItem * 0.5 - 5);
        rightEnter.select("text.name")
            .attr('y', this.heightItem * 0.5)
            .attr('x', this.WIDTH / 2);
    };
    default_1.prototype.build = function () {
        this.SVG.append('g').attr('class', '_container');
        this.update();
    };
    default_1.prototype.update = function () {
        var _this = this;
        this.SVG.select('g._container').selectAll("g._item").remove();
        var leftGroup = this.SVG.select('g._container').selectAll("g._leftBar").data(this.DATA[0]);
        var rightGroup = this.SVG.select('g._container').selectAll("g._rightBar").data(this.DATA[1]);
        var leftEnter = leftGroup.enter().append('g').attr("class", "_leftBar");
        var rightEnter = rightGroup.enter().append('g').attr("class", "_rightBar").attr('transform', "translate(" + this.WIDTH / 2 + ",0)");
        leftEnter.merge(leftGroup.select('g._leftitem'))
            .attr('class', function (d, i) { return _this.itemClass(d, i) + "_leftitem"; })
            .transition()
            .duration(this.DURATION)
            .attr('transform', function (d, i) { return "translate(0," + _this.heightItem * (i + 0.5) + ")"; });
        rightEnter.merge(rightGroup.select('g._rightitem'))
            .attr('class', function (d, i) { return _this.itemClass(d, i) + "_rightitem"; })
            .transition()
            .duration(this.DURATION)
            .attr('transform', function (d, i) { return "translate(0," + _this.heightItem * (i + 0.5) + ")"; });
        leftEnter.append("rect")
            .attr('x', this.WIDTH / 2)
            .attr('y', this.heightItem * 0.5)
            .attr("height", 10)
            .attr("rx", 5)
            .attr("width", 0)
            .merge(leftGroup.select('rect'))
            .transition()
            .duration(this.DURATION)
            .attr('x', function (d) { return _this.WIDTH / 2 - _this.barScale1(d["value"]); })
            .attr("width", function (d) { return _this.barScale1(d["value"]); });
        leftEnter.append("text")
            .attr("class", "value")
            .attr("style", "font-family:vapfont;fill: #ed96ae;text-anchor: start;")
            .attr('x', this.WIDTH / 2)
            .attr('y', this.heightItem * 0.5 - 5)
            .merge(leftGroup.select('rect.value'))
            .transition()
            .duration(this.DURATION)
            .attr('x', 0)
            .text(function (d) { return utils_1.Format.formatNumber(d["value"]); });
        leftEnter.append("text")
            .attr("class", "name")
            .attr("style", "text-anchor: end;")
            .attr('x', this.WIDTH / 2 - 5)
            .attr('y', this.heightItem * 0.5 - 5)
            .merge(leftGroup.select('rect.name'))
            .transition()
            .duration(this.DURATION)
            .text(function (d) { return d["name"]; });
        rightEnter.append("rect")
            .attr('x', 0)
            .attr('y', this.heightItem * 0.5)
            .attr("height", 10)
            .attr("rx", 5)
            .attr("width", 0)
            .merge(rightGroup.select('rect'))
            .transition()
            .duration(this.DURATION)
            .attr('x', this.WIDTH / 2)
            .attr("width", function (d) { return _this.barScale2(d["value"]); });
        rightEnter.append("text")
            .attr("class", "value")
            .attr("style", "font-family:vapfont;fill: #ed96ae;text-anchor: end;")
            .attr('x', 0)
            .attr('y', this.heightItem * 0.5 - 5)
            .merge(rightEnter.select('rect.value'))
            .transition()
            .duration(this.DURATION)
            .attr('x', this.WIDTH)
            .text(function (d) { return utils_1.Format.formatNumber(d["value"]); });
        rightEnter.append("text")
            .attr("class", "name")
            .attr("style", "text-anchor: start;")
            .attr('y', this.heightItem * 0.5 - 5)
            .attr('x', 0)
            .merge(rightEnter.select('rect.name'))
            .transition()
            .duration(this.DURATION)
            .text(function (d) { return d["name"]; })
            .attr('x', this.WIDTH / 2 + 5);
        rightEnter.on('mouseover', function (d) {
            common_1.ToolTip.show("<h2>" + _this.props.titles[1] + "-" + d["name"] + " : <small class=\"vapfont\">" + utils_1.Format.formatNumber(d["value"]) + "</small></h2>");
        }).on('mouseout', function (d) {
            common_1.ToolTip.hide();
        });
        leftEnter.on('mouseover', function (d) {
            common_1.ToolTip.show("<h2>" + _this.props.titles[0] + "-" + d["name"] + " : <small class=\"vapfont\">" + utils_1.Format.formatNumber(d["value"]) + "</small></h2>");
        }).on('mouseout', function (d) {
            common_1.ToolTip.hide();
        });
    };
    return default_1;
}(D3Chart_1.default));
exports.default = default_1;
