import { Box, InfoIcon, TableListItem, Text } from '@wix/design-system';
import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { getFieldTypeIcon } from '../../utils/fieldTypePrefixIcons';
import { FieldIndications } from './FieldIndications';
function _ColumnListTableListItem(props) {
    const { column, state, showDivider, fieldActions, domRef, dragging, dragHandleProps, index, rowIndex, columnIndex, droppable, ...rest } = props;
    const { select } = state;
    const { collectionDataExtension } = state;
    const { translate: t } = useWixPatternsContainer();
    const showFieldTypeIcons = state.showFieldTypeIcons;
    const { infoTooltipProps } = column;
    const prefixIcon = showFieldTypeIcons
        ? getFieldTypeIcon({ fieldType: column.fieldType })
        : null;
    const checkboxDisabled = !column.hideable;
    const hasSearchValue = state.searchValue.trim().length > 0;
    const dragDisabled = column.reorderDisabled || hasSearchValue;
    const checked = select.isChecked(column.id);
    const infoContent = infoTooltipProps?.panelContent || infoTooltipProps?.content;
    const isRequired = column.validation?.some((r) => r.type === 'required') ?? false;
    const style = useMemo(() => ({
        display: 'flex',
        flexDirection: 'column',
        position: 'relative',
    }), []);
    const dataExtensionsCTA = collectionDataExtension?.DataExtension
        ?.CustomColumnsEditCustomFieldCTAButton &&
        column.dataExtension &&
        column.dataExtension.editable && (React.createElement(collectionDataExtension.DataExtension.CustomColumnsEditCustomFieldCTAButton, { field: column.dataExtension }));
    const hasIndications = column.isPii ||
        column.isPrimary ||
        column.isSystem ||
        !!column.dataExtension;
    const hasRightContent = hasIndications || !!dataExtensionsCTA || !!fieldActions;
    return (React.createElement("div", { ...rest, ref: domRef, style: style, "data-hook": `column-item-${column.id}` },
        React.createElement(TableListItem, { showDivider: showDivider, checkbox: true, checked: checked, verticalPadding: "tiny", horizontalPadding: "small", dragHandleSize: "small", checkboxDisabled: checkboxDisabled, checkboxTooltipContent: checkboxDisabled
                ? dragDisabled
                    ? t('cairo.table.custom-columns.disabled.tooltip')
                    : t('cairo.table.custom-columns.hidden.disabled.tooltip')
                : undefined, checkboxTooltipProps: {
                maxWidth: '400px',
                appendTo: 'window',
                disabled: !checkboxDisabled,
            }, onCheckboxChange: () => {
                if (checkboxDisabled) {
                    return;
                }
                state.onColumnCheckboxToggle(column);
                state.customizeColumnsInSidePanelBi({ actionName: 'visibility' });
            }, ...(hasSearchValue
                ? {}
                : {
                    draggable: true,
                    dragging,
                    dragDisabled,
                    dragHandleProps: {
                        ...dragHandleProps,
                        tooltipContent: dragDisabled
                            ? checkboxDisabled
                                ? t('cairo.table.custom-columns.disabled.tooltip')
                                : t('cairo.table.custom-columns.move.disabled.tooltip')
                            : undefined,
                        tooltipProps: {
                            maxWidth: '400px',
                            appendTo: 'window',
                        },
                    },
                }), options: [
                {
                    value: (React.createElement(Box, { ...(prefixIcon ? { verticalAlign: 'middle' } : {}), minWidth: 0, flexGrow: 1 },
                        React.createElement("div", { style: {
                                ...(prefixIcon
                                    ? { display: 'flex', alignItems: 'center' }
                                    : {}),
                                padding: '0',
                                cursor: checkboxDisabled ? undefined : 'pointer',
                                overflow: 'hidden',
                                minWidth: 0,
                            }, onClick: () => {
                                if (checkboxDisabled) {
                                    return;
                                }
                                state.onColumnCheckboxToggle(column);
                            } },
                            prefixIcon && (React.createElement(Box, { align: "center", verticalAlign: "middle", marginRight: "SP1", flexShrink: 0 }, prefixIcon)),
                            React.createElement(Text, { size: "small", weight: "normal", dataHook: "tableListItem-label", ellipsis: true, appendTo: "window" }, column.name || column.title || column.id),
                            isRequired && (React.createElement(Text, { size: "tiny", skin: "error", weight: "bold" }, "\u00A0*"))),
                        React.createElement("div", { style: { cursor: 'default' }, onPointerDown: (e) => e.stopPropagation() }, infoContent && (React.createElement(InfoIcon, { size: "small", ...infoTooltipProps, dataHook: "info-icon", content: infoContent }))))),
                },
                ...(hasRightContent
                    ? [
                        {
                            value: (React.createElement(Box, { gap: "SP1", verticalAlign: "middle" },
                                React.createElement(FieldIndications, { column: column }),
                                dataExtensionsCTA,
                                fieldActions)),
                            align: 'right',
                            width: 'auto',
                        },
                    ]
                    : []),
            ] })));
}
export const ColumnListTableListItem = observer(_ColumnListTableListItem);
//# sourceMappingURL=ColumnListTableListItem.js.map