"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SortableFieldItem = void 0;
const react_1 = __importDefault(require("react"));
const classnames_1 = __importDefault(require("classnames"));
const cn_ui_1 = require("@cainiaofe/cn-ui");
const sortable_1 = require("@dnd-kit/sortable");
const utilities_1 = require("@dnd-kit/utilities");
const field_icon_utils_1 = require("../../../../../cn-ai-table/view/utils/field-icon-utils");
const icons_1 = require("../../icons");
const SortableFieldItem = (props) => {
    const { field, onToggleVisible } = props;
    const getIcon = (0, field_icon_utils_1.useFieldIcon)();
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = (0, sortable_1.useSortable)({
        id: field.dataIndex,
    });
    const style = {
        transform: utilities_1.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_1.default.createElement("div", { ref: setNodeRef, style: style, className: (0, classnames_1.default)('card-config-field-item', {
            'card-config-field-item--dragging': isDragging,
            'card-config-field-item--hidden': !field.visible,
        }) },
        react_1.default.createElement("div", { className: "card-config-field-drag-handle", ...attributes, ...listeners },
            react_1.default.createElement(cn_ui_1.CnIcon, { type: "bar", size: "medium" })),
        react_1.default.createElement("div", { className: "card-config-field-icon" },
            react_1.default.createElement("img", { src: getIcon(iconType), alt: field.title, style: { width: '16px', height: '16px' } })),
        react_1.default.createElement("div", { className: "card-config-field-name" }, field.title),
        react_1.default.createElement("div", { className: "card-config-field-actions" },
            react_1.default.createElement("div", { className: (0, classnames_1.default)('card-config-field-visibility', {
                    'card-config-field-visibility--off': !field.visible,
                }), onClick: handleToggleVisible },
                react_1.default.createElement(icons_1.SvgIcon, { name: field.visible ? 'eye' : 'eyeClose', size: 16, color: "#333" })))));
};
exports.SortableFieldItem = SortableFieldItem;
