"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const prefix_classname_1 = __importDefault(require("prefix-classname"));
const antd_1 = require("antd");
const react_dnd_1 = require("react-dnd");
const fuse_js_1 = __importDefault(require("fuse.js"));
const icons_1 = require("@ant-design/icons");
const const_1 = require("../../../config/const");
require("./style.scss");
const header_1 = require("../header");
const cn = (0, prefix_classname_1.default)('');
const c = (0, prefix_classname_1.default)(`${const_1.CLS_PREFIX}-material-panel`);
const PreviewRender = ({ runtime }) => {
    const containerRef = react_1.default.useRef();
    react_1.default.useEffect(() => {
        var _a;
        const render = (_a = runtime === null || runtime === void 0 ? void 0 : runtime.previewRender) !== null && _a !== void 0 ? _a : runtime === null || runtime === void 0 ? void 0 : runtime.__fallbackPreviewRender;
        const dispose = render(containerRef.current);
        if (dispose) {
            return dispose;
        }
    }, [runtime === null || runtime === void 0 ? void 0 : runtime.__fallbackPreviewRender, runtime === null || runtime === void 0 ? void 0 : runtime.previewRender]);
    return react_1.default.createElement("div", { ref: containerRef });
};
const InfoIcon = ({ runtime, homepage, name, key }) => {
    if (!runtime) {
        return null;
    }
    return (react_1.default.createElement(antd_1.Popover, { trigger: ['click'], content: react_1.default.createElement(PreviewRender, { runtime: runtime }), onVisibleChange: (v) => { }, placement: 'rightBottom', overlayInnerStyle: { minWidth: 200, minHeight: 100 }, title: react_1.default.createElement("span", { style: { display: 'flex', justifyContent: 'space-between' } },
            react_1.default.createElement("span", null, `${name}${key ? `(${key})` : ''}`),
            !!homepage && (react_1.default.createElement("a", { style: { fontWeight: 'normal' }, href: homepage, target: '_blank' }, "\u67E5\u770B\u8BE6\u60C5"))) },
        react_1.default.createElement(icons_1.InfoCircleOutlined, { style: { marginRight: 2, fontSize: 12 } })));
};
const AssetUI = react_1.default.memo((asset) => {
    const { homepage, cover, name, data, runtime } = asset;
    const item = react_1.default.useMemo(() => ({ cover, name, data }), [cover, name, data]);
    const [{ isDragging }, drag, preview] = (0, react_dnd_1.useDrag)(() => ({
        type: 'asset',
        item,
        end: (item, monitor) => { },
        collect: (monitor) => ({
            isDragging: monitor.isDragging()
        })
    }), [item]);
    const opacity = isDragging ? 0.4 : 1;
    const renderComp = ({ ref, opacity, style, className }) => {
        return (react_1.default.createElement("div", { ref: ref, className: c('__asset-group__cell', className), style: Object.assign({ opacity }, style) },
            react_1.default.createElement(antd_1.Image, { preview: false, wrapperClassName: c('__asset-group__cell__img__wrapper'), className: c('__asset-group__cell__img'), src: cover }),
            react_1.default.createElement("span", { className: c('__asset-group__cell__name') },
                react_1.default.createElement(InfoIcon, Object.assign({}, asset)),
                react_1.default.createElement("span", { style: { display: 'inline-flex', padding: '2px 3px', fontSize: 12 }, ref: preview }, homepage && !runtime ? (react_1.default.createElement("a", { href: homepage, style: { lineHeight: 1 }, target: '_blank' }, name)) : (name)))));
    };
    // preview
    return renderComp({ ref: drag, opacity, className: isDragging && '-dragging' });
});
const AssetGroupComp = react_1.default.memo(({ assetGroup }) => {
    var _a;
    return (react_1.default.createElement("div", { className: c('__asset-group') },
        react_1.default.createElement("h4", null, assetGroup.name),
        react_1.default.createElement("div", { className: c('__asset-group__container') }, (_a = assetGroup.assets) === null || _a === void 0 ? void 0 : _a.map((asset) => {
            return react_1.default.createElement(AssetUI, Object.assign({}, asset));
        }))));
});
const MaterialUi = ({ mat }) => {
    const [input, setInput] = react_1.default.useState('');
    const [{ canSelect }] = (0, header_1.useHeaderStatus)();
    const assetGroups = react_1.default.useMemo(() => {
        if (!input || !input.trim()) {
            return mat.assetGroups;
        }
        if (!mat.assetGroups) {
            return [];
        }
        return mat.assetGroups
            .map((g) => {
            var _a;
            const fuse = new fuse_js_1.default((_a = g.assets) !== null && _a !== void 0 ? _a : [], {
                keys: ['name', 'key'],
                includeScore: true,
                findAllMatches: true,
                threshold: 0.3,
                isCaseSensitive: false
            });
            return Object.assign(Object.assign({}, g), { assets: fuse.search(input.trim()).map((x) => x.item) });
        })
            .filter((g) => { var _a; return (_a = g.assets) === null || _a === void 0 ? void 0 : _a.length; });
    }, [input, mat === null || mat === void 0 ? void 0 : mat.assetGroups]);
    return (react_1.default.createElement(react_1.default.Fragment, null,
        react_1.default.createElement("div", { className: c('__search-wrapper') },
            react_1.default.createElement(antd_1.Input, { value: input, onChange: (e) => {
                    setInput(e.target.value);
                }, suffix: react_1.default.createElement(icons_1.SearchOutlined, null), className: c('__search'), placeholder: '输入关键字过滤物料' }),
            canSelect && react_1.default.createElement(antd_1.Typography.Text, { type: 'secondary' }, "\u8BF7\u9009\u62E9\u4EE5\u4E0B\u7269\u6599\u62D6\u5165\u300C\u9875\u9762\u300D\u4E2D")),
        react_1.default.createElement("div", { className: c('__mp') }, assetGroups === null || assetGroups === void 0 ? void 0 : assetGroups.map((group, index) => {
            var _a;
            return (react_1.default.createElement(AssetGroupComp, { key: (_a = group.key) !== null && _a !== void 0 ? _a : index, assetGroup: group }));
        }))));
};
const MaterialPanel = react_1.default.memo(({ loading, className, materials }) => {
    return (react_1.default.createElement(antd_1.Spin, { spinning: loading, delay: 200, className: cn(c(), className) },
        !(materials === null || materials === void 0 ? void 0 : materials.length) && react_1.default.createElement(antd_1.Empty, { description: '暂无物料', style: { paddingTop: 40 } }),
        !!(materials === null || materials === void 0 ? void 0 : materials.length) && (react_1.default.createElement(antd_1.Tabs, { className: c('__tabs') }, materials.map((mat, i) => {
            var _a;
            const matKey = (_a = mat.key) !== null && _a !== void 0 ? _a : i;
            return (react_1.default.createElement(antd_1.Tabs.TabPane, { tab: mat.name, key: matKey },
                react_1.default.createElement(MaterialUi, { mat: mat })));
        })))));
});
MaterialPanel.defaultProps = {};
exports.default = MaterialPanel;
//# sourceMappingURL=index.js.map