import React from 'react';
import classNames from 'classnames';
import { CnIcon } from '@cainiaofe/cn-ui';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { useFieldIcon } from '../../../../../cn-ai-table/view/utils/field-icon-utils';
import { SvgIcon } from '../../icons';
export const SortableFieldItem = (props) => {
    const { field, onToggleVisible } = props;
    const getIcon = useFieldIcon();
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
        id: field.dataIndex,
    });
    const style = {
        transform: CSS.Transform.toString(transform),
        transition,
    };
    const handleToggleVisible = (e) => {
        e.stopPropagation();
        onToggleVisible(field.dataIndex);
    };
    let iconType = field.fieldType;
    if (field.isAiColumn) {
        iconType = 'CnAiField';
    }
    else if (field.isFormulaColumn) {
        iconType = 'CnFormulaField';
    }
    return (React.createElement("div", { ref: setNodeRef, style: style, className: classNames('card-config-field-item', {
            'card-config-field-item--dragging': isDragging,
            'card-config-field-item--hidden': !field.visible,
        }) },
        React.createElement("div", { className: "card-config-field-drag-handle", ...attributes, ...listeners },
            React.createElement(CnIcon, { type: "bar", size: "medium" })),
        React.createElement("div", { className: "card-config-field-icon" },
            React.createElement("img", { src: getIcon(iconType), alt: field.title, style: { width: '16px', height: '16px' } })),
        React.createElement("div", { className: "card-config-field-name" }, field.title),
        React.createElement("div", { className: "card-config-field-actions" },
            React.createElement("div", { className: classNames('card-config-field-visibility', {
                    'card-config-field-visibility--off': !field.visible,
                }), onClick: handleToggleVisible },
                React.createElement(SvgIcon, { name: field.visible ? 'eye' : 'eyeClose', size: 16, color: "#333" })))));
};
