import React from 'react';
import p from 'prefix-classname';
import { Empty, Image, Divider, Tabs } from 'antd';
import { useDrag } from 'react-dnd';
import { CLS_PREFIX } from '../../../config/const';
import './style.scss';
const cn = p('');
const c = p(`${CLS_PREFIX}-material-panel`);
const AssetUI = React.memo(({ homepage, cover, name, data }) => {
    const item = React.useMemo(() => ({ cover, name, data }), [cover, name, data]);
    const [{ isDragging }, drag, preview] = 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.createElement("div", { ref: ref, title: '按住以进行拖动', className: c('__asset-group__cell', className), style: Object.assign({ opacity }, style) },
            React.createElement(Image, { wrapperClassName: c('__asset-group__cell__img__wrapper'), className: c('__asset-group__cell__img'), src: cover }),
            React.createElement("span", { className: c('__asset-group__cell__name') },
                React.createElement("span", { style: { display: 'inline-flex', padding: '2px 3px' }, ref: preview }, homepage ? (React.createElement("a", { href: homepage, target: '_blank', style: { color: '#399bf5' } }, name)) : (name)))));
    };
    // preview
    return renderComp({ ref: drag, opacity, className: isDragging && '-dragging' });
});
const AssetGroupComp = React.memo(({ assetGroup }) => {
    var _a;
    return (React.createElement("div", { className: c('__asset-group') },
        React.createElement("h4", null, assetGroup.name),
        React.createElement("div", { className: c('__asset-group__container') }, (_a = assetGroup.assets) === null || _a === void 0 ? void 0 : _a.map((asset) => {
            return React.createElement(AssetUI, Object.assign({}, asset));
        }))));
});
const MaterialPanel = React.memo(({ className, materials }) => {
    return (React.createElement("div", { className: cn(c(), className) },
        !(materials === null || materials === void 0 ? void 0 : materials.length) && React.createElement(Empty, { description: '暂无物料', style: { paddingTop: 40 } }),
        !!(materials === null || materials === void 0 ? void 0 : materials.length) && (React.createElement(Tabs, { className: c('__tabs') }, materials.map((mat) => {
            var _a;
            return (React.createElement(Tabs.TabPane, { key: mat.key, tab: mat.name },
                React.createElement("div", { className: c('__mp') }, (_a = mat.assetGroups) === null || _a === void 0 ? void 0 : _a.map((group, index, { length }) => (React.createElement("div", { key: group.key },
                    React.createElement(AssetGroupComp, { assetGroup: group }),
                    index !== length - 1 && React.createElement(Divider, { type: 'horizontal' })))))));
        })))));
});
MaterialPanel.defaultProps = {};
export default MaterialPanel;
//# sourceMappingURL=index.js.map