"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResourceWidget = void 0;
require("./styles.less");
var core_1 = require("@designable/core");
var shared_1 = require("@designable/shared");
var reactive_vue_1 = require("@formily/reactive-vue");
var hooks_1 = require("../../hooks");
var IconWidget_1 = require("../IconWidget");
var TextWidget_1 = require("../TextWidget");
var classnames_1 = __importDefault(require("classnames"));
var vue_demi_1 = require("vue-demi");
var NodeTitleWidget_1 = require("../NodeTitleWidget");
exports.ResourceWidget = (0, reactive_vue_1.observer)((0, vue_demi_1.defineComponent)({
    props: {
        defaultExpand: { type: Boolean, default: true },
        sources: { type: Array, default: function () { return []; } },
        className: String,
        title: String,
    },
    setup: function (props, _a) {
        var slots = _a.slots;
        var prefixRef = (0, hooks_1.usePrefix)('resource');
        var expand = (0, vue_demi_1.ref)(props.defaultExpand);
        var renderNode = function (source) {
            var prefix = (0, vue_demi_1.unref)(prefixRef);
            var node = source.node, icon = source.icon, title = source.title, thumb = source.thumb, span = source.span;
            return (<div class={prefix + '-item'} style={{ gridColumnStart: "span ".concat(span || 1) }} {...{ key: node === null || node === void 0 ? void 0 : node.id, 'data-designer-source-id': node === null || node === void 0 ? void 0 : node.id }}>
            {thumb && <img class={prefix + '-item-thumb'} src={thumb}/>}
            {icon && (0, vue_demi_1.isVNode)(icon) ?
                    <>{icon}</>
                    : (<IconWidget_1.IconWidget class={prefix + '-item-icon'} infer={icon} style={{ width: '150px', height: '40px' }}/>)}
            <span class={prefix + '-item-text'}>
              {title || <NodeTitleWidget_1.NodeTitleWidget node={node}></NodeTitleWidget_1.NodeTitleWidget>}
            </span>
          </div>);
        };
        var sources = props.sources.reduce(function (buf, source) {
            if ((0, core_1.isResourceList)(source)) {
                return buf.concat(source);
            }
            else if ((0, core_1.isResourceHost)(source)) {
                return buf.concat(source.Resource);
            }
            return buf;
        }, []);
        var remainItems = sources.reduce(function (length, source) {
            var _a;
            return length + ((_a = source.span) !== null && _a !== void 0 ? _a : 1);
        }, 0) % 3;
        return function () {
            var prefix = (0, vue_demi_1.unref)(prefixRef);
            return (<div class={(0, classnames_1.default)(prefix, {
                    expand: expand.value,
                })}>
            <div class={prefix + '-header'} onClick={function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    expand.value = !expand.value;
                }}>
              <div class={prefix + '-header-expand'}>
                <IconWidget_1.IconWidget infer="Expand" size={'10px'}/>
              </div>
              <div class={prefix + '-header-content'}>
                <TextWidget_1.TextWidget>{props.title}</TextWidget_1.TextWidget>
              </div>
            </div>
            <div class={prefix + '-content-wrapper'}>
              <div class={prefix + '-content'}>
                {sources.map((0, shared_1.isFn)(slots.default) ? slots.default : renderNode)}
                {remainItems ? (<div class={prefix + '-item-remain'} style={{ gridColumnStart: "span ".concat(3 - remainItems) }}></div>) : null}
              </div>
            </div>
          </div>);
        };
    },
}));
//# sourceMappingURL=index.jsx.map