import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import { addEventListener } from '../../utils/component/event-handler';
import { runOnceInNextFrame } from '../../utils/nextFrame';
import reactCSS from '../helpers/reactcss';
import * as saturation from '../helpers/saturation';
var Saturation = (function (_super) {
    __extends(Saturation, _super);
    function Saturation() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.containerRef = createRef();
        _this.eventCancelList = [];
        _this.handleChange = runOnceInNextFrame(function (e, skip) {
            _this.props.onChange(saturation.calculateChange(e, skip, _this.props, _this.containerRef.current), e);
        });
        _this.handleTouch = function (e) {
            e.persist();
            _this.handleChange(e);
        };
        _this.handleMouseDown = function (e) {
            e.persist();
            _this.handleChange(e, true);
            _this.eventCancelList.push(addEventListener(window, 'mousemove', _this.handleChange));
            _this.eventCancelList.push(addEventListener(window, 'mouseup', _this.handleMouseUp, { passive: true }));
        };
        _this.handleMouseUp = function () {
            _this.unbindEventListeners();
        };
        return _this;
    }
    Saturation.prototype.componentWillUnmount = function () {
        this.unbindEventListeners();
        this.handleChange.cancel();
    };
    Saturation.prototype.unbindEventListeners = function () {
        this.eventCancelList.forEach(function (cancel) { return cancel(); });
        this.eventCancelList = [];
    };
    Saturation.prototype.render = function () {
        var _a = this.props.style || {}, color = _a.color, white = _a.white, black = _a.black, pointer = _a.pointer, circle = _a.circle;
        var styles = reactCSS({
            default: {
                color: {
                    absolute: '0px 0px 0px 0px',
                    background: "hsl(" + this.props.hsl.h + ",100%, 50%)",
                    borderRadius: this.props.radius,
                },
                white: {
                    absolute: '0px 0px 0px 0px',
                    background: 'linear-gradient(to right, #fff, rgba(255,255,255,0))',
                },
                black: {
                    absolute: '0px 0px 0px 0px',
                    background: 'linear-gradient(to top, #000, rgba(0,0,0,0))',
                    boxShadow: this.props.shadow,
                },
                pointer: {
                    position: 'absolute',
                    top: -(this.props.hsv.v * 100) + 100 + "%",
                    left: this.props.hsv.s * 100 + "%",
                    cursor: 'default',
                },
                circle: {
                    width: '4px',
                    height: '4px',
                    boxShadow: "0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)",
                    borderRadius: '50%',
                    cursor: 'hand',
                    transform: 'translate(-2px, -2px)',
                },
            },
            custom: {
                color: color,
                white: white,
                black: black,
                pointer: pointer,
                circle: circle,
            },
        }, { custom: !!this.props.style });
        return (_jsx("div", __assign({ style: styles.color, ref: this.containerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleTouch, onTouchStart: this.handleTouch, "data-zv": 'v10.0.11' }, { children: _jsxs("div", __assign({ style: styles.white, "data-zv": 'v10.0.11' }, { children: [_jsx("div", { style: styles.black, "data-zv": 'v10.0.11' }, void 0), _jsx("div", __assign({ style: styles.pointer, "data-zv": 'v10.0.11' }, { children: this.props.pointer ? (_jsx(this.props.pointer, __assign({}, this.props), void 0)) : (_jsx("div", { style: styles.circle, "data-zv": 'v10.0.11' }, void 0)) }), void 0)] }), void 0) }), void 0));
    };
    return Saturation;
}(Component));
export default Saturation;
