"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DEFAULT_STYLE = void 0;
const namespaceURI_1 = require("../../../../../client/component/namespaceURI");
const element_1 = require("../../../../../client/element");
const style_1 = require("../../../../../client/style");
exports.DEFAULT_STYLE = {
    strokeWidth: '3px',
    fill: 'none',
    stroke: 'currentColor',
};
// M 50,50 A 30 30 6 1 0 50,49.9
// M 10,50 L50,90 L90,50 L50,10 Z
class SVGPath extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._prop_handler = {
            className: (className) => {
                this._path_el.className.value = className;
            },
            style: (style) => {
                (0, style_1.applyStyle)(this._path_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
            },
            d: (d) => {
                if (d === undefined) {
                    this._path_el.removeAttribute('d');
                }
                else {
                    this._path_el.setAttribute('d', d);
                }
            },
            markerStart: (markerStart) => {
                this._path_el.setAttribute('marker-start', markerStart);
            },
            markerEnd: (markerEnd) => {
                this._path_el.setAttribute('marker-end', markerEnd);
            },
            strokeWidth: (strokeWidth) => {
                if (strokeWidth === undefined) {
                    this._path_el.removeAttribute('stroke-width');
                }
                else {
                    this._path_el.setAttribute('stroke-width', `${strokeWidth}`);
                }
            },
            fillRule: (fillRule) => {
                if (fillRule === undefined) {
                    this._path_el.removeAttribute('fill-rule');
                }
                else {
                    this._path_el.setAttribute('fill-rule', fillRule);
                }
            },
        };
        const { id, className, style = {}, d = '', markerStart, markerEnd, fillRule, } = $props;
        const path_el = this.$system.api.document.createElementNS(namespaceURI_1.namespaceURI, 'path');
        if (id !== undefined) {
            path_el.id = id;
        }
        if (className) {
            path_el.classList.value = className;
        }
        (0, style_1.applyStyle)(path_el, Object.assign(Object.assign({}, exports.DEFAULT_STYLE), style));
        path_el.setAttribute('d', d);
        if (markerStart !== undefined) {
            path_el.setAttribute('marker-start', markerStart);
        }
        if (markerEnd !== undefined) {
            path_el.setAttribute('marker-end', markerEnd);
        }
        if (fillRule !== undefined) {
            path_el.setAttribute('fill-rule', fillRule);
        }
        this._path_el = path_el;
        this.$element = path_el;
        this.$unbundled = false;
        this.$primitive = true;
    }
    onPropChanged(prop, current) {
        this._prop_handler[prop](current);
    }
}
exports.default = SVGPath;
//# sourceMappingURL=Component.js.map