(function (global) {
    'use strict';

    /**
     * 属性面板（壳侧）：通过 Bridge 读写节点属性。
     * @constructor
     */
    function InspectorPanel() {
        this.el = null;
        this.body = null;
        this._bridge = null;
        this._uuid = '';
        this._props = null;
    }

    InspectorPanel.prototype.setBridge = function (bridge) {
        this._bridge = bridge;
    };

    InspectorPanel.prototype.mount = function () {
        var root = document.createElement('div');
        root.className = 'pw-panel-inner pw-inspector';
        root.style.height = '100%';
        root.style.display = 'flex';
        root.style.flexDirection = 'column';
        root.innerHTML =
            '<div class="pw-panel-body pw-inspector-body" id="pw-inspector-body">' +
            '<div class="pw-inspector-empty">未选中节点</div></div>';
        this.el = root;
        this.body = root.querySelector('#pw-inspector-body');
        return root;
    };

    InspectorPanel.prototype.loadUuid = function (uuid) {
        var self = this;
        this._uuid = uuid || '';
        if (!this._uuid || !this._bridge) {
            this._props = null;
            if (this.body) this.body.innerHTML = '<div class="pw-inspector-empty">未选中节点</div>';
            return;
        }
        this._bridge.call('node.get', { uuid: this._uuid }).then(function (props) {
            self._props = props;
            self.render();
        }).catch(function () {
            if (self.body) self.body.innerHTML = '<div class="pw-inspector-empty">读取失败</div>';
        });
    };

    InspectorPanel.prototype.render = function () {
        var body = this.body;
        var p = this._props;
        if (!body) return;
        if (!p) {
            body.innerHTML = '<div class="pw-inspector-empty">未选中节点</div>';
            return;
        }
        var html = [];
        html.push('<section class="pw-insp-section open">');
        html.push('<header class="pw-insp-sec-head" data-toggle="1"><span class="pw-insp-caret"></span><span>节点</span></header>');
        html.push('<div class="pw-insp-sec-body">');
        html.push(rowText('名称', 'name', p.name));
        html.push(rowCheck('激活', 'active', !!p.active));
        html.push(rowNum('Layer', 'layer', p.layer));
        html.push(rowVec3('位置', ['px', 'py', 'pz'], [p.pos.x, p.pos.y, p.pos.z]));
        html.push(rowVec3('旋转', ['rx', 'ry', 'rz'], [p.euler.x, p.euler.y, p.euler.z]));
        html.push(rowVec3('缩放', ['sx', 'sy', 'sz'], [p.scale.x, p.scale.y, p.scale.z]));
        html.push('</div></section>');

        if (p.ui) {
            html.push('<section class="pw-insp-section open">');
            html.push('<header class="pw-insp-sec-head" data-toggle="1"><span class="pw-insp-caret"></span><span>UITransform</span></header>');
            html.push('<div class="pw-insp-sec-body">');
            html.push(rowVec2('尺寸', ['uiw', 'uih'], [p.ui.width, p.ui.height], ['W', 'H']));
            html.push(rowVec2('锚点', ['uax', 'uay'], [p.ui.anchorX, p.ui.anchorY], ['X', 'Y']));
            html.push('</div></section>');
        }

        var comps = p.comps || [];
        for (var i = 0; i < comps.length; i++) {
            var c = comps[i];
            html.push('<section class="pw-insp-section open">');
            html.push('<header class="pw-insp-sec-head" data-toggle="1"><span class="pw-insp-caret"></span><span>' +
                escapeHtml(c.name) + '</span></header>');
            html.push('<div class="pw-insp-sec-body">');
            var fields = c.fields || [];
            if (!fields.length) html.push('<div class="pw-insp-muted">无可编辑公开字段</div>');
            for (var f = 0; f < fields.length; f++) {
                var field = fields[f];
                var fid = 'c' + c.index + '_' + field.key;
                if (field.type === 'number') html.push(rowNum(field.key, fid, field.value));
                else if (field.type === 'boolean') html.push(rowCheck(field.key, fid, field.value));
                else html.push(rowText(field.key, fid, field.value));
            }
            html.push('</div></section>');
        }

        body.innerHTML = html.join('');
        this._bindFields();
        this._bindSections();
    };

    InspectorPanel.prototype._bindSections = function () {
        var heads = this.body.querySelectorAll('.pw-insp-sec-head[data-toggle]');
        for (var i = 0; i < heads.length; i++) {
            heads[i].addEventListener('click', function (ev) {
                var sec = ev.currentTarget.parentNode;
                if (sec) sec.classList.toggle('open');
            });
        }
    };

    InspectorPanel.prototype._bindFields = function () {
        var self = this;
        var body = this.body;
        if (!body || !this._bridge || !this._uuid) return;
        var inputs = body.querySelectorAll('[data-fid]');
        for (var i = 0; i < inputs.length; i++) {
            (function (el) {
                var run = function () {
                    var fid = el.getAttribute('data-fid');
                    var value;
                    if (el.type === 'checkbox') value = !!el.checked;
                    else if (el.type === 'number') value = parseFloat(el.value);
                    else value = el.value;
                    self._bridge.call('node.set', { uuid: self._uuid, fid: fid, value: value });
                };
                el.addEventListener('change', run);
                el.addEventListener('input', run);
            })(inputs[i]);
        }
    };

    function rowText(label, id, value) {
        return '<div class="pw-insp-row"><label class="pw-insp-label">' + escapeHtml(label) +
            '</label><input class="pw-insp-input" data-fid="' + id + '" type="text" value="' +
            escapeAttr(value == null ? '' : String(value)) + '" /></div>';
    }
    function rowNum(label, id, value) {
        return '<div class="pw-insp-row"><label class="pw-insp-label">' + escapeHtml(label) +
            '</label><input class="pw-insp-input pw-insp-num" data-fid="' + id +
            '" type="number" step="any" value="' + (value != null ? value : 0) + '" /></div>';
    }
    function rowCheck(label, id, value) {
        return '<div class="pw-insp-row"><label class="pw-insp-label">' + escapeHtml(label) +
            '</label><label class="pw-insp-check"><input data-fid="' + id + '" type="checkbox"' +
            (value ? ' checked' : '') + ' /><span></span></label></div>';
    }
    function rowVec3(label, ids, values) {
        return '<div class="pw-insp-row pw-insp-vec">' +
            '<label class="pw-insp-label">' + escapeHtml(label) + '</label>' +
            '<div class="pw-insp-xyz">' +
            axis('X', ids[0], values[0]) +
            axis('Y', ids[1], values[1]) +
            axis('Z', ids[2], values[2]) +
            '</div></div>';
    }
    function rowVec2(label, ids, values, axisNames) {
        return '<div class="pw-insp-row pw-insp-vec">' +
            '<label class="pw-insp-label">' + escapeHtml(label) + '</label>' +
            '<div class="pw-insp-xyz">' +
            axis(axisNames[0], ids[0], values[0]) +
            axis(axisNames[1], ids[1], values[1]) +
            '</div></div>';
    }
    function axis(name, id, value) {
        return '<div class="pw-insp-axis"><span class="pw-insp-axis-tag">' + name +
            '</span><input class="pw-insp-input pw-insp-num" data-fid="' + id +
            '" type="number" step="any" value="' + (value != null ? value : 0) + '" /></div>';
    }

    function escapeHtml(s) {
        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    }
    function escapeAttr(s) {
        return escapeHtml(s).replace(/"/g, '&quot;');
    }

    global.PWInspectorPanel = InspectorPanel;
})(window);