"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const classnames_1 = require("../../../../../client/classnames");
const element_1 = require("../../../../../client/element");
const spec_1 = require("../../../../../client/spec");
const f_1 = require("../../../../f/object/Keys/f");
const Component_1 = require("../../svg/Circle/Component");
const Component_2 = require("../../svg/Rect/Component");
const Component_3 = require("../../svg/SVG/Component");
class Minimal extends element_1.Element {
    constructor($props, $system) {
        super($props, $system);
        this._default_style = () => {
            const width = 80;
            const height = 16;
            return {
                width: `${width}px`,
                height: `${height}px`,
                color: 'currentColor',
            };
        };
        this._render = (id) => {
            const { specs } = this.$system;
            const spec = (0, spec_1.getSpec)(specs, id);
            const width = 80;
            const height = 16;
            const R = 4;
            const children = [];
            const { inputs = {}, outputs = {} } = spec;
            const is_component = (0, spec_1.isComponentId)(specs, id);
            const cX = width / 2;
            const cY = height / 2 - 0.5;
            const input_pin_ids = (0, f_1.keys)(inputs).filter((pinId) => {
                const input = inputs[pinId];
                const { defaultIgnored } = input;
                if (defaultIgnored) {
                    return false;
                }
                return true;
            });
            const output_pin_ids = (0, f_1.keys)(outputs).filter((pinId) => {
                const output = outputs[pinId];
                const { defaultIgnored } = output;
                if (defaultIgnored) {
                    return false;
                }
                return true;
            });
            const pin_count = {
                input: input_pin_ids.length,
                output: output_pin_ids.length,
            };
            const r = 1;
            const push_pin = (type, i) => {
                const count = pin_count[type];
                let x = cX;
                let y = cY;
                const pair = i % 2 === 0;
                if (type === 'input') {
                    const position = Math.floor((count - i - 1) / 2);
                    x -= position * (r + 3) + (R + 3);
                    if (i > 0) {
                        if (pair) {
                            y -= r + 1;
                        }
                        else {
                            y += r + 1;
                        }
                    }
                }
                else {
                    const position = Math.ceil((i + 1) / (2 + 0.001)) - 1;
                    x += position * (r + 3) + (R + 3);
                    if (position < (count - 1) / 2) {
                        if (pair) {
                            y -= r + 1;
                        }
                        else {
                            y += r + 1;
                        }
                    }
                }
                const pin = new Component_1.default({
                    className: (0, classnames_1.default)('unit-minimal-pin', `unit-minimal-${type}`),
                    x,
                    y,
                    r,
                    style: {
                        strokeWidth: 'px',
                        stroke: 'currentColor',
                        // fill: type === 'output' ? 'currentColor' : 'none',
                        fill: 'currentColor',
                    },
                }, this.$system);
                children.push(pin);
            };
            input_pin_ids.forEach((_, index) => {
                push_pin('input', index);
            });
            let core;
            if (is_component) {
                core = new Component_2.default({
                    className: 'unit-minimal-core',
                    x: cX - R,
                    y: cY - R,
                    width: 2 * R,
                    height: 2 * R,
                    style: {
                        fill: 'none',
                        stroke: 'currentColor',
                        strokeWidth: '1px',
                    },
                }, this.$system);
            }
            else {
                core = new Component_1.default({
                    className: 'unit-minimal-core',
                    x: cX,
                    y: cY,
                    r: R,
                    style: {
                        // fill: 'none',
                        fill: 'currentColor',
                        stroke: 'currentColor',
                        strokeWidth: '1px',
                    },
                }, this.$system);
            }
            children.push(core);
            output_pin_ids.forEach((_, index) => {
                push_pin('output', index);
            });
            this._svg.setChildren(children);
        };
        const { id, className, style } = $props;
        const width = 80;
        const height = 16;
        const svg = new Component_3.default({
            className: (0, classnames_1.default)('unit-minimal', className),
            style: Object.assign(Object.assign({}, this._default_style()), style),
        }, this.$system);
        this._svg = svg;
        if (id) {
            this._render(id);
        }
        this.$element = svg.$element;
        this.$slot = {
            default: svg,
        };
        this.setSubComponents({
            svg,
        });
        this.registerRoot(svg);
    }
    onPropChanged(prop, current) {
        if (prop === 'id') {
            this._render(current);
        }
        else if (prop === 'style') {
            this._svg.setProp('style', Object.assign(Object.assign({}, this._default_style()), current));
        }
    }
}
exports.default = Minimal;
//# sourceMappingURL=Component.js.map