import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import reactCSS from '../helpers/reactcss';
import * as alpha from '../helpers/alpha';
import Checkboard from './Checkboard';
import { addEventListener } from '../../utils/component/event-handler';
var Alpha = (function (_super) {
    __extends(Alpha, _super);
    function Alpha() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.containerRef = createRef();
        _this.eventCancelList = [];
        _this.handleChange = function (e, skip) {
            var change = alpha.calculateChange(e, skip, _this.props, _this.containerRef.current);
            change && _this.props.onChange(change, e);
        };
        _this.handleMouseDown = function (e) {
            _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();
        };
        _this.unbindEventListeners = function () {
            _this.eventCancelList.forEach(function (cancel) { return cancel(); });
            _this.eventCancelList = [];
        };
        return _this;
    }
    Alpha.prototype.componentWillUnmount = function () {
        this.unbindEventListeners();
    };
    Alpha.prototype.render = function () {
        var rgb = this.props.rgb;
        var styles = reactCSS({
            default: {
                alpha: {
                    absolute: '0px 0px 0px 0px',
                    borderRadius: this.props.radius,
                },
                checkboard: {
                    absolute: '0px 0px 0px 0px',
                    overflow: 'hidden',
                },
                gradient: {
                    absolute: '0px 0px 0px 0px',
                    background: "linear-gradient(to right, rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 0) 0%,\n           rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 1) 100%)",
                    boxShadow: this.props.shadow,
                    borderRadius: this.props.radius,
                },
                container: {
                    position: 'relative',
                    height: '100%',
                    margin: '0 3px',
                },
                pointer: {
                    position: 'absolute',
                    left: rgb.a * 100 + "%",
                },
                slider: {
                    width: '4px',
                    borderRadius: '1px',
                    height: '8px',
                    boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
                    background: '#fff',
                    marginTop: '1px',
                    transform: 'translateX(-2px)',
                },
            },
            vertical: {
                gradient: {
                    background: "linear-gradient(to bottom, rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 0) 0%,\n           rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ", 1) 100%)",
                },
                pointer: {
                    left: 0,
                    top: rgb.a * 100 + "%",
                },
            },
            overwrite: __assign({}, this.props.style),
        }, {
            vertical: this.props.direction === 'vertical',
            overwrite: true,
        });
        return (_jsxs("div", __assign({ style: styles.alpha, "data-zv": 'v10.0.12' }, { children: [_jsx("div", __assign({ style: styles.checkboard, "data-zv": 'v10.0.12' }, { children: _jsx(Checkboard, { renderers: this.props.renderers }, void 0) }), void 0), _jsx("div", { style: styles.gradient, "data-zv": 'v10.0.12' }, void 0), _jsx("div", __assign({ className: "alpha-bar", style: styles.container, ref: this.containerRef, onMouseDown: this.handleMouseDown, onTouchMove: this.handleChange, onTouchStart: this.handleChange, "data-zv": 'v10.0.12' }, { children: _jsx("div", __assign({ style: styles.pointer, "data-zv": 'v10.0.12' }, { children: this.props.pointer ? (_jsx(this.props.pointer, __assign({}, this.props), void 0)) : (_jsx("div", { style: styles.slider, "data-zv": 'v10.0.12' }, void 0)) }), void 0) }), void 0)] }), void 0));
    };
    return Alpha;
}(Component));
export { Alpha };
export default Alpha;
