import './styles.less';
import { isResourceHost, isResourceList, } from '@designable/core';
import { isFn } from '@designable/shared';
import { observer } from '@formily/reactive-vue';
import { usePrefix } from '../../hooks';
import { IconWidget } from '../IconWidget';
import { TextWidget } from '../TextWidget';
import cls from 'classnames';
import { defineComponent, isVNode, ref, unref } from 'vue-demi';
import { NodeTitleWidget } from '../NodeTitleWidget';
export var ResourceWidget = observer(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 = usePrefix('resource');
        var expand = ref(props.defaultExpand);
        var renderNode = function (source) {
            var prefix = 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 && isVNode(icon) ?
                    <>{icon}</>
                    : (<IconWidget class={prefix + '-item-icon'} infer={icon} style={{ width: '150px', height: '40px' }}/>)}
            <span class={prefix + '-item-text'}>
              {title || <NodeTitleWidget node={node}></NodeTitleWidget>}
            </span>
          </div>);
        };
        var sources = props.sources.reduce(function (buf, source) {
            if (isResourceList(source)) {
                return buf.concat(source);
            }
            else if (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 = unref(prefixRef);
            return (<div class={cls(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 infer="Expand" size={'10px'}/>
              </div>
              <div class={prefix + '-header-content'}>
                <TextWidget>{props.title}</TextWidget>
              </div>
            </div>
            <div class={prefix + '-content-wrapper'}>
              <div class={prefix + '-content'}>
                {sources.map(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