"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 D3Chart_1 = require("../D3Chart");
var _ = require("lodash");
var React = require("react");
var d3 = require("d3");
var ToolTip_1 = require("../common/ToolTip");
var FaltLength = 800;
var Tag = /** @class */ (function () {
    function Tag(el, x, y, z, r, CX, CY) {
        this.el = el;
        this.r = r;
        this.x = x;
        this.y = y;
        this.z = z;
        this.CX = CX;
        this.CY = CY;
    }
    Tag.prototype.move = function () {
        var scale = FaltLength / (FaltLength - this.z);
        var alpha = (this.z + this.r) / (2 * this.r);
        this.el.style.fontSize = 15 * scale + "px";
        this.el.style.opacity = alpha + 0.5;
        this.el.style.filter = "alpha(opacity = " + (alpha + 0.5) * 100 + ")";
        this.el.style.zIndex = scale * 100;
        this.el.style.left = this.x + this.CX - this.el.offsetWidth / 2 + "px";
        this.el.style.top = this.y + this.CY - this.el.offsetHeight / 2 + "px";
    };
    return Tag;
}());
var default_1 = /** @class */ (function (_super) {
    __extends(default_1, _super);
    function default_1() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.tags = [];
        _this.pid = 0;
        _this.EX = 0;
        _this.EY = 0;
        _this.CX = 0;
        _this.CY = 0;
        _this.angleX = Math.PI / FaltLength;
        _this.angleY = Math.PI / FaltLength;
        _this.colorScale = function (txt) { return "rgb(" + (Math.random() * 255) + "," + (Math.random() * 255) + "," + (Math.random() * 255) + ")"; };
        return _this;
    }
    default_1.prototype.build = function () {
        var _this = this;
        this.SVG.remove();
        var tagBall = document.getElementById(this.id);
        tagBall.addEventListener("mousemove", function (evt) {
            var x = evt.clientX - _this.EX - _this.CX;
            var y = evt.clientY - _this.EY - _this.CY;
            _this.angleY = x * 0.0001;
            _this.angleX = y * 0.0001;
        });
        this.update();
    };
    default_1.prototype.rotateX = function () {
        var cos = Math.cos(this.angleX);
        var sin = Math.sin(this.angleX);
        this.tags.map(function (tag) {
            var y1 = tag.y * cos - tag.z * sin;
            var z1 = tag.z * cos + tag.y * sin;
            tag.y = y1;
            tag.z = z1;
        });
    };
    default_1.prototype.rotateY = function () {
        var cos = Math.cos(this.angleY);
        var sin = Math.sin(this.angleY);
        this.tags.map(function (tag) {
            var x1 = tag.x * cos - tag.z * sin;
            var z1 = tag.z * cos + tag.x * sin;
            tag.x = x1;
            tag.z = z1;
        });
    };
    default_1.prototype._loop = function () {
        var _this = this;
        window.clearInterval(this.pid);
        this.pid = window.setInterval(function () {
            _this.rotateX();
            _this.rotateY();
            _this.tags.forEach(function (tag) { return tag.move(); });
        }, 50);
    };
    default_1.prototype._update = function () {
        var _this = this;
        var tagBall = document.getElementById(this.id);
        var tagEls = document.getElementsByClassName('_item_ball');
        if (this.props.valueField) {
            var _a = __read(this.extent(this.props.data, function (item) { return item[_this.props.valueField]; }), 2), min = _a[0], max = _a[1];
            // @ts-ignore
            this.colorScale = d3.scaleQuantize().domain([min, max]).range(['#66E064', '#64C1DE', '#6497DE', '#7864DE', '#B564DE', '#E567B1', '#FA7071', '#FBA670']);
        }
        this.CX = tagBall.offsetWidth / 2;
        this.CY = tagBall.offsetHeight / 2;
        this.EX = tagBall.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft;
        this.EY = tagBall.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;
        var RADIUS = _.min([this.CX, this.CY]) - 24;
        for (var i = 0; i < tagEls.length; i++) {
            var k = -1 + (2 * (i + 1) - 1) / tagEls.length;
            var a = Math.acos(k);
            var b = a * Math.sqrt(this.tags.length * Math.PI);
            var x = RADIUS * Math.sin(a) * Math.cos(b);
            var y = RADIUS * Math.sin(a) * Math.sin(b);
            var z = RADIUS * Math.cos(a);
            var t = new Tag(tagEls[i], x, y, z, RADIUS, this.CX, this.CY);
            // @ts-ignore
            tagEls[i].style.color = this.colorScale(parseFloat(tagEls[i].getAttribute('data')));
            // @ts-ignore
            tagEls[i].style.display = "block";
            this.tags.push(t);
            t.move();
        }
        this._loop();
    };
    default_1.prototype.update = function () {
        var _this = this;
        this.tags = [];
        window.setTimeout(function () {
            _this._update();
        }, 100);
        if (_.has(this.props, 'tip')) {
            d3.selectAll("#" + this.id + " a._item_ball").on('mouseover', function (d, i) {
                ToolTip_1.default.show(_this.props.tip(_this.props.data[i], i));
                return;
            }).on('mouseout', function () {
                ToolTip_1.default.hide();
            });
        }
    };
    default_1.prototype.onClick = function (item) {
        if (this.props.onClick) {
            this.props.onClick(item);
        }
    };
    default_1.prototype.render = function () {
        var _this = this;
        // @ts-ignore
        return React.createElement("div", { className: "_vc_word_ball", id: this.id, style: { width: '100%', height: '100%', display: 'block' } },
            " ",
            this.props.data.map(function (item) { return React.createElement("a", { data: item[_this.props.valueField] || 0, className: "_item _item_ball", style: { display: 'none' }, title: item[_this.props.labelField], onClick: function (e) { return _this.onClick(item); } }, item[_this.props.labelField]); }));
    };
    return default_1;
}(D3Chart_1.default));
exports.default = default_1;
