import React, { memo, useState } from 'react';
import classnames from 'classnames';
import { canAddCrosswalk, getSourceSystemLabel } from '@reltio/mdm-sdk';
import { useDndMonitor } from '@dnd-kit/core';
import Typography from '@mui/material/Typography';
import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
import { useCrosswalkColor } from '../../../contexts/CrosswalksDisplayContext';
import { SourceIcon } from '../../../SourceIcon';
import { ColoredBlock } from '../ColoredBlock';
import { useStyles } from './styles';
export var CrosswalkDragPreview = memo(function (_a) {
    var _b;
    var crosswalk = _a.crosswalk;
    var styles = useStyles();
    var metadata = useMdmMetadata();
    var color = useCrosswalkColor(crosswalk);
    var sourceSystemLabel = getSourceSystemLabel(metadata, crosswalk.type);
    var _c = useState(false), canDrop = _c[0], setCanDrop = _c[1];
    useDndMonitor({
        onDragOver: function (event) {
            var _a, _b, _c;
            var attributeType = (_c = (_b = (_a = event.over) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.attributeType;
            setCanDrop(!!attributeType && canAddCrosswalk(crosswalk, attributeType));
        }
    });
    return (React.createElement(ColoredBlock, { color: color, className: classnames(styles.crosswalkPreview, (_b = {}, _b[styles.noDrop] = !canDrop, _b)) },
        React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
        React.createElement(Typography, { className: styles.sourceLabel, variant: 'body2' }, sourceSystemLabel)));
});
CrosswalkDragPreview.displayName = 'CrosswalkDragPreview';
