"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 __extends = (this && this.__extends) || (function () {
    var 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 function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
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 styled_components_1 = require("styled-components");
var utils_1 = require("../utils");
var Grid_1 = require("./Grid");
var ANGLERANGE = 135;
var StyledSVG = styled_components_1.default.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n"], ["\n\tdisplay: block;\n\twidth: 100%;\n\theight: 100%;\n"])));
var ArcSliderContainer = styled_components_1.default(Grid_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tposition: relative;\n"], ["\n\tposition: relative;\n"])));
var LabelContainer = styled_components_1.default(Grid_1.Flex).attrs({
    justify: 'center',
    flexDirection: 'column',
})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\ttext-align: center;\n\tpointer-events: none;\n"], ["\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\ttext-align: center;\n\tpointer-events: none;\n"])));
var polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
    return {
        x: centerX + radius * Math.cos(angleInRadians),
        y: centerY + radius * Math.sin(angleInRadians),
    };
};
var describeArc = function (x, y, radius, startAngle, endAngle) {
    var start = polarToCartesian(x, y, radius, endAngle);
    var end = polarToCartesian(x, y, radius, startAngle);
    var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
    var d = "M " + start.x + " " + start.y + " A " + radius + " " + radius + " 0 " + largeArcFlag + " 0 " + end.x + " " + end.y;
    return d;
};
var ArcSlider = (function (_super) {
    __extends(ArcSlider, _super);
    function ArcSlider(props) {
        var _this = _super.call(this, props) || this;
        _this.$slider = null;
        _this.handleMouseUp = function () {
            _this.setState({ isDragging: false });
        };
        _this.handleMouseDown = function (e) {
            e.preventDefault();
            _this.setState({ isDragging: true });
        };
        _this.handleMouseMove = function (e) {
            if (_this.state.isDragging && _this.$slider) {
                var _a = _this.$slider.getBoundingClientRect(), left = _a.left, top_1 = _a.top, width = _a.width, height = _a.height;
                var sliderCenter = {
                    x: left + width / 2,
                    y: top_1 + height / 2,
                };
                var mouseLocation = {
                    x: e.pageX,
                    y: e.pageY,
                };
                if (!!e.touches) {
                    mouseLocation = {
                        x: e.touches[0].pageX,
                        y: e.touches[0].pageY,
                    };
                }
                var angleDegrees = utils_1.getAngleBetweenPoints(sliderCenter, mouseLocation) + 90;
                if (angleDegrees > 180) {
                    angleDegrees = Math.max(angleDegrees - 360, -ANGLERANGE);
                }
                else if (angleDegrees < -ANGLERANGE) {
                    angleDegrees = -ANGLERANGE;
                }
                else if (angleDegrees > ANGLERANGE) {
                    angleDegrees = ANGLERANGE;
                }
                var value = (angleDegrees + ANGLERANGE) / (ANGLERANGE * 2);
                _this.setState({
                    innerValue: value,
                });
                if (_this.props.onValueChange) {
                    _this.props.onValueChange(value);
                }
            }
        };
        var value = props.value;
        _this.state = {
            isDragging: false,
            innerValue: value == null ? 0 : utils_1.constrainNumber(value, 0, 1),
        };
        return _this;
    }
    ArcSlider.prototype.componentDidMount = function () {
        document.addEventListener('mousemove', this.handleMouseMove);
        document.addEventListener('touchmove', this.handleMouseMove);
        document.addEventListener('mouseup', this.handleMouseUp);
        document.addEventListener('touchend', this.handleMouseUp);
        document.addEventListener('touchcancel', this.handleMouseUp);
    };
    ArcSlider.prototype.componentWillUnmount = function () {
        document.removeEventListener('mousemove', this.handleMouseMove);
        document.removeEventListener('touchmove', this.handleMouseMove);
        document.removeEventListener('mouseup', this.handleMouseUp);
        document.removeEventListener('touchend', this.handleMouseUp);
        document.removeEventListener('touchcancel', this.handleMouseUp);
    };
    ArcSlider.prototype.render = function () {
        var _this = this;
        var innerValue = this.state.innerValue;
        var value = this.props.value == null
            ? innerValue
            : utils_1.constrainNumber(this.props.value, 0, 1);
        var _a = this.props, onValueChange = _a.onValueChange, children = _a.children, props = __rest(_a, ["onValueChange", "children"]);
        var color = this.props.fillColor || '#FEC400';
        var background = this.props.background || '#707274';
        var valueAngle = ANGLERANGE * 2 * value - ANGLERANGE;
        return (React.createElement(ArcSliderContainer, __assign({}, props),
            React.createElement(StyledSVG, { style: {
                    cursor: this.state.isDragging ? 'grabbing' : 'grab',
                }, innerRef: function (elem) { return (_this.$slider = elem); }, viewBox: "0 0 600 600", onMouseDown: this.handleMouseDown, onTouchStart: this.handleMouseDown },
                React.createElement("defs", null,
                    React.createElement("linearGradient", { id: "rendition-arc-slider-gradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%" },
                        React.createElement("stop", { offset: "0%", stopColor: utils_1.darken(color) }),
                        React.createElement("stop", { offset: "100%", stopColor: color })),
                    React.createElement("filter", { xmlns: "http://www.w3.org/2000/svg", id: "rendition-arc-slider-dropshadow", height: "130%" },
                        React.createElement("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "1.25" }),
                        React.createElement("feOffset", { dx: "0", dy: "0", result: "offsetblur" }),
                        React.createElement("feMerge", null,
                            React.createElement("feMergeNode", null),
                            React.createElement("feMergeNode", { in: "SourceGraphic" })))),
                React.createElement("path", { fill: "none", stroke: background, strokeWidth: "20.5", strokeLinecap: "round", d: describeArc(300, 300, 200, -ANGLERANGE, ANGLERANGE) }),
                React.createElement("path", { fill: "none", stroke: "url(#rendition-arc-slider-gradient)", strokeWidth: "22", strokeLinecap: "round", d: describeArc(300, 300, 200, -ANGLERANGE, valueAngle) }),
                React.createElement("circle", { cx: "300", cy: "100", r: "20", fill: "white", filter: "url(#rendition-arc-slider-dropshadow)", transform: "rotate(" + valueAngle + ", 300, 300)" }),
                React.createElement("circle", { cx: "300", cy: "100", r: "14", fill: color, transform: "rotate(" + valueAngle + ", 300, 300)" })),
            React.createElement(LabelContainer, null, children)));
    };
    return ArcSlider;
}(React.Component));
exports.default = ArcSlider;
var templateObject_1, templateObject_2, templateObject_3;
