import { Box, InfoIcon, TableListItem, Text } from '@wix/design-system';
import React, { useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { useWixPatternsContainer } from '@wix/bex-core/react';
function _ColumnListTableListItem(props) {
    const { column, state, showDivider, domRef, dragging, dragHandleProps, index, rowIndex, columnIndex, droppable, ...rest } = props;
    const { select } = state;
    const { collectionDataExtension } = useToolbarCollectionContext();
    const { translate: t } = useWixPatternsContainer();
    const { infoTooltipProps } = column;
    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 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 }));
    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", 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, null,
                        React.createElement("div", { style: {
                                padding: '0 6px',
                                cursor: checkboxDisabled ? undefined : 'pointer',
                                wordBreak: 'break-word',
                            }, onClick: () => {
                                if (checkboxDisabled) {
                                    return;
                                }
                                state.onColumnCheckboxToggle(column);
                            } },
                            React.createElement(Text, { size: "small", dataHook: "tableListItem-label" }, column.name || column.title || column.id)),
                        React.createElement("div", { style: { cursor: 'default' }, onPointerDown: (e) => e.stopPropagation() }, infoContent && (React.createElement(InfoIcon, { size: "small", ...infoTooltipProps, dataHook: "info-icon", content: infoContent }))))),
                },
                ...(dataExtensionsCTA
                    ? [
                        {
                            value: dataExtensionsCTA,
                            align: 'right',
                        },
                    ]
                    : []),
            ] })));
}
export const ColumnListTableListItem = observer(_ColumnListTableListItem);
//# sourceMappingURL=ColumnListTableListItem.js.map