"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PICKER_SIZE = exports.DEFAULT_STYLE = void 0;
const color_1 = require("../../../../../client/color");
const mergeStyle_1 = require("../../../../../client/component/mergeStyle");
const element_1 = require("../../../../../client/element");
const pointerdown_1 = require("../../../../../client/event/pointer/pointerdown");
const pointermove_1 = require("../../../../../client/event/pointer/pointermove");
const pointerup_1 = require("../../../../../client/event/pointer/pointerup");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const f_1 = require("../../../../core/relation/Clamp/f");
const Component_1 = require("../../Div/Component");
const Component_2 = require("../../Frame/Component");
exports.DEFAULT_STYLE = {
    position: 'absolute',
    overflow: 'hidden',
    touchAction: 'none',
};
exports.PICKER_SIZE = 12;
class HSVColorPicker extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._s = 100;
        this._v = 100;
        this._pointer_down = {};
        this._getValue = () => {
            const { h = 0 } = this.$props;
            const hex = (0, color_1.HSVToHEX)(h, this._s, this._v);
            return hex;
        };
        this._on_pointer_down = (event, _event) => {
            // console.log('HSVColorPicker', '_on_pointer_down')
            const { pointerId } = event;
            this._pointer_down[pointerId] = true;
            this._color_picker.setPointerCapture(pointerId);
            this._on_drag(event);
            this.dispatchEvent('input', this._getValue());
        };
        this._on_drag = (event) => {
            const { offsetX, offsetY } = event;
            const { $width, $height } = this._color_picker.$$context;
            const bcr = this.getBoundingClientRect();
            const { width, height } = bcr;
            const { a: s } = (0, f_1.default)({ a: (offsetX / $width) * 100, min: 0, max: 100 });
            const { a: v } = (0, f_1.default)({
                a: (1 - offsetY / $height) * 100,
                min: 0,
                max: 100,
            });
            this._s = s;
            this._v = v;
            this._refresh_sv();
        };
        this._refresh_s = () => {
            // console.log('HSVColorPicker', '_refresh_s', this._s)
            (0, mergeStyle_1.default)(this._picker, {
                left: `${this._s}%`,
            });
        };
        this._refresh_v = () => {
            (0, mergeStyle_1.default)(this._picker, {
                top: `${100 - this._v}%`,
            });
        };
        this._refresh_sv = () => {
            this._refresh_s();
            this._refresh_v();
        };
        this._on_pointer_move = (event) => {
            // console.log('HSVColorPicker', '_on_pointer_move')
            const { pointerId } = event;
            if (this._pointer_down[pointerId]) {
                this._on_drag(event);
                this.dispatchEvent('input', this._getValue());
            }
        };
        this._on_pointer_up = (event, _event) => {
            // console.log('HSVColorPicker', '_on_pointer_up')
            const { pointerId } = event;
            this._color_picker.releasePointerCapture(pointerId);
            delete this._pointer_down[pointerId];
            this.dispatchEvent('change', this._getValue());
        };
        const { style, h = 0, s = 100, v = 100 } = $props;
        this._s = s;
        this._v = v;
        const backgroundColor = (0, color_1.hueToColor)(h);
        const picker_inner = new Component_1.default({
            style: {
                position: 'absolute',
                left: '1px',
                top: '1px',
                width: `${exports.PICKER_SIZE - 2}px`,
                height: `${exports.PICKER_SIZE - 2}px`,
                border: `1px solid white`,
                boxSizing: 'border-box',
                borderRadius: '50%',
            },
        }, this.$system);
        const picker_outer = new Component_1.default({
            style: {
                position: 'absolute',
                width: `${exports.PICKER_SIZE}px`,
                height: `${exports.PICKER_SIZE}px`,
                border: `1px solid black`,
                boxSizing: 'border-box',
                borderRadius: '50%',
            },
        }, this.$system);
        const picker = new Component_1.default({
            style: {
                position: 'absolute',
                width: `${exports.PICKER_SIZE}px`,
                height: `${exports.PICKER_SIZE}px`,
                left: `${s}%`,
                top: `${100 - v}%`,
                transform: 'translate(-50%, -50%)',
                pointerEvents: 'none',
            },
        }, this.$system);
        picker.registerParentRoot(picker_outer);
        picker.registerParentRoot(picker_inner);
        this._picker = picker;
        const val = new Component_1.default({
            style: {
                position: 'absolute',
                backgroundImage: 'linear-gradient(to top, #000, rgba(204, 154, 129, 0))',
            },
        }, this.$system);
        val.registerParentRoot(picker);
        const sat = new Component_1.default({
            style: {
                position: 'absolute',
                backgroundImage: 'linear-gradient(to right, #fff, rgba(204, 154, 129, 0))',
            },
        }, this.$system);
        sat.registerParentRoot(val);
        const background = new Component_1.default({
            style: {
                position: 'absolute',
                backgroundColor,
            },
        }, this.$system);
        background.registerParentRoot(sat);
        this._background = background;
        const color_picker = new Component_2.default({
            className: 'color-picker',
            style: Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style),
        }, this.$system);
        color_picker.registerParentRoot(background);
        this._color_picker = color_picker;
        this.$element = (0, parentElement_1.default)($system);
        this.$slot['default'] = color_picker.$slot['default'];
        this.$unbundled = false;
        this.$primitive = true;
        this.setSubComponents({
            color_picker,
            background,
            sat,
            val,
            picker,
            picker_outer,
            picker_inner,
        });
        this.registerRoot(color_picker);
        // PERF
        this._color_picker.addEventListener((0, pointerdown_1.makePointerDownListener)(this._on_pointer_down));
        this._color_picker.addEventListener((0, pointermove_1.makePointerMoveListener)(this._on_pointer_move));
        this._color_picker.addEventListener((0, pointerup_1.makePointerUpListener)(this._on_pointer_up));
    }
    onPropChanged(prop, current) {
        if (prop === 'style') {
            this._color_picker.setProp('style', Object.assign(Object.assign({}, exports.DEFAULT_STYLE), current));
        }
        else if (prop === 'h') {
            const { h = 0 } = this.$props;
            const backgroundColor = (0, color_1.hueToColor)(h);
            (0, mergeStyle_1.default)(this._background, {
                backgroundColor,
            });
        }
        else if (prop === 's') {
            this._s = current;
            this._refresh_s();
        }
        else if (prop === 'v') {
            this._v = current;
            this._refresh_v();
        }
    }
}
exports.default = HSVColorPicker;
//# sourceMappingURL=Component.js.map