"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 const_1 = require("../../../config/const");
require("./style.scss");
const cn = (0, prefix_classname_1.default)('');
const c = (0, prefix_classname_1.default)(`${const_1.CLS_PREFIX}-material-panel`);
const AssetUI = react_1.default.memo(({ homepage, cover, name, data }) => {
    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, title: '按住以进行拖动', className: c('__asset-group__cell', className), style: Object.assign({ opacity }, style) },
            react_1.default.createElement(antd_1.Image, { 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("span", { style: { display: 'inline-flex', padding: '2px 3px' }, ref: preview }, homepage ? (react_1.default.createElement("a", { href: homepage, target: '_blank', style: { color: '#399bf5' } }, 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 MaterialPanel = react_1.default.memo(({ className, materials }) => {
    return (react_1.default.createElement("div", { 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) => {
            var _a;
            return (react_1.default.createElement(antd_1.Tabs.TabPane, { key: mat.key, tab: mat.name },
                react_1.default.createElement("div", { className: c('__mp') }, (_a = mat.assetGroups) === null || _a === void 0 ? void 0 : _a.map((group, index, { length }) => (react_1.default.createElement("div", { key: group.key },
                    react_1.default.createElement(AssetGroupComp, { assetGroup: group }),
                    index !== length - 1 && react_1.default.createElement(antd_1.Divider, { type: 'horizontal' })))))));
        })))));
});
MaterialPanel.defaultProps = {};
exports.default = MaterialPanel;
//# sourceMappingURL=index.js.map