"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const mergeStyle_1 = require("../../../../../client/component/mergeStyle");
const element_1 = require("../../../../../client/element");
const parentElement_1 = require("../../../../../client/platform/web/parentElement");
const Component_1 = __importDefault(require("../../svg/Circle/Component"));
const Component_2 = __importDefault(require("../../svg/Rect/Component"));
const Component_3 = __importDefault(require("../../svg/SVG/Component"));
class Selection extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._render_selection_shape = () => {
            const { width = 0, height = 0, shape = 'rect', stroke = 'currentColor', strokeWidth = 1, strokeDasharray = '6', strokeDashOffset = 0, } = this.$props;
            const x = 0.5 * strokeWidth;
            const y = 0.5 * strokeWidth;
            let selection_shape;
            if (shape === 'circle') {
                selection_shape = new Component_1.default({
                    x: width / 2 + x,
                    y: height / 2 + y,
                    r: width / 2,
                    style: {
                        fill: 'none',
                        stroke: '',
                        strokeDasharray,
                        strokeWidth: `${strokeWidth}`,
                        strokeDashoffset: `${strokeDashOffset}`,
                    },
                }, this.$system);
            }
            else {
                selection_shape = new Component_2.default({
                    width,
                    height,
                    x,
                    y,
                    style: {
                        fill: 'none',
                        stroke: '',
                        strokeDasharray,
                        strokeWidth: `${strokeWidth}`,
                        strokeDashoffset: `${strokeDashOffset}`,
                    },
                }, this.$system);
            }
            return selection_shape;
        };
        const { width = 0, height = 0, x = 0, y = 0, stroke = 'currentColor', strokeWidth = 1, style, } = this.$props;
        const selection_shape = this._render_selection_shape();
        this._selection_shape = selection_shape;
        const selection = new Component_3.default({
            className: 'selection',
            style: {
                position: 'absolute',
                width: `${width + strokeWidth}px`,
                height: `${height + strokeWidth}px`,
                fill: 'none',
                pointerEvents: 'none',
                top: `calc(50% + ${y}px)`,
                left: `calc(50% + ${x}px)`,
                transform: 'translate(-50%, -50%)',
                userSelect: 'none',
                stroke,
                // ...style,
            },
        }, this.$system);
        selection.appendChild(selection_shape);
        this._selection = selection;
        const $element = (0, parentElement_1.parentElement)($system);
        this.$element = $element;
        this.$unbundled = false;
        this.$slot = selection.$slot;
        this.$subComponent = {
            selection,
        };
        this.registerRoot(selection);
    }
    onPropChanged(prop, current) {
        if (prop === 'stroke') {
            (0, mergeStyle_1.mergePropStyle)(this._selection, {
                stroke: current,
            });
        }
        else if (prop === 'width') {
            const { shape, width, strokeWidth = 1 } = this.$props;
            (0, mergeStyle_1.mergePropStyle)(this._selection, {
                width: `${width + strokeWidth}px`,
            });
            if (shape === 'circle') {
                const selection_shape = this._selection_shape;
                selection_shape.setProp('x', width / 2 + 0.5 * strokeWidth);
                selection_shape.setProp('r', width / 2);
            }
            else {
                const selection_shape = this._selection_shape;
                selection_shape.setProp('width', current);
            }
        }
        else if (prop === 'height') {
            const { shape, height, strokeWidth = 1 } = this.$props;
            (0, mergeStyle_1.mergePropStyle)(this._selection, {
                height: `${height + strokeWidth}px`,
            });
            if (shape === 'circle') {
                const selection_shape = this._selection_shape;
                selection_shape.setProp('y', height / 2 + 0.5 * strokeWidth);
            }
            else {
                const selection_shape = this._selection_shape;
                selection_shape.setProp('height', current);
            }
        }
        else if (prop === 'strokeDasharray') {
            (0, mergeStyle_1.mergePropStyle)(this._selection_shape, {
                strokeDasharray: current,
            });
        }
        else if (prop === 'strokeDashOffset') {
            (0, mergeStyle_1.mergePropStyle)(this._selection_shape, {
                strokeDashoffset: `${current ?? 0}`,
            });
        }
        else if (prop === 'shape') {
            const selection_shape = this._render_selection_shape();
            this._selection_shape = selection_shape;
            this._selection.setChildren([selection_shape]);
        }
        else if (prop === 'x') {
            const { x = 0 } = this.$props;
            (0, mergeStyle_1.mergePropStyle)(this._selection, {
                left: `calc(50% + ${x}px)`,
            });
        }
        else if (prop === 'y') {
            const { y = 0 } = this.$props;
            (0, mergeStyle_1.mergePropStyle)(this._selection, {
                top: `calc(50% + ${y}px)`,
            });
        }
    }
}
exports.default = Selection;
//# sourceMappingURL=Component.js.map