import { Box, Dropdown, Text, TableListItem, listItemSelectBuilder, SectionHelper, } from '@wix/design-system';
import { ArrowRight } from '@wix/wix-ui-icons-common';
import React from 'react';
import { observer } from 'mobx-react-lite';
const COLUMN_WIDTHS = {
    title: 'minmax(0, 150px)',
    arrow: '1fr',
    field: 'minmax(0, 250px)',
};
const SCROLLBAR_GUTTER = { scrollbarGutter: 'stable' };
function _ImportStepConfiguration({ state }) {
    const { csvHeaders, fields, translate: t } = state;
    const baseDropdownOptions = fields
        .filter((field) => field.id != null)
        .map((field) => listItemSelectBuilder({
        id: field.id,
        label: field.header,
        title: field.header,
    }));
    const { selectedFieldIds } = state;
    const hasNoRows = state.csvRows.length === 0;
    return (React.createElement(Box, { direction: "vertical", dataHook: "import-mapping-step", gap: "SP3" },
        hasNoRows && (React.createElement(Box, { padding: "0 SP4" },
            React.createElement(SectionHelper, { dataHook: "import-no-rows-warning", skin: "warning", title: t('cairo.import.noRowsWarningTitle') }, t('cairo.import.noRowsWarningDescription')))),
        React.createElement(Box, { direction: "vertical", flex: 1, minHeight: 0 },
            React.createElement(Box, { display: "grid", direction: "horizontal", gap: "SP4", padding: "SP2 SP4", backgroundColor: "var(--wds-color-fill-surface-neutral,var(--wsr-color-D75, #F7F8F8))", boxShadow: "inset 0 1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB)), inset 0 -1px 0 0 var(--wds-color-border-dark-secondary, var(--wsr-color-D60, #DFE5EB))", gridTemplateColumns: `${COLUMN_WIDTHS.title} ${COLUMN_WIDTHS.arrow} ${COLUMN_WIDTHS.field}`, flexShrink: 0, style: SCROLLBAR_GUTTER },
                React.createElement(Box, { minWidth: 0, direction: "vertical" },
                    React.createElement(Text, { size: "small", weight: "thin", ellipsis: true }, t('cairo.import.columnTitle'))),
                React.createElement(Box, { minWidth: 0, direction: "vertical" }),
                React.createElement(Box, { minWidth: 0, direction: "vertical" },
                    React.createElement(Text, { size: "small", weight: "thin", ellipsis: true }, t('cairo.import.collectionField')))),
            React.createElement(Box, { direction: "vertical", overflowY: "auto", maxHeight: hasNoRows ? 'calc(80vh - 420px)' : 'calc(80vh - 300px)', style: SCROLLBAR_GUTTER }, csvHeaders.map((header, index) => (React.createElement(TableListItem, { key: header, showDivider: index < csvHeaders.length - 1, options: [
                    {
                        value: (React.createElement(Text, { ellipsis: true, size: "small" }, header)),
                        width: COLUMN_WIDTHS.title,
                    },
                    {
                        value: (React.createElement(Box, { align: "center" },
                            React.createElement(ArrowRight, null))),
                        width: COLUMN_WIDTHS.arrow,
                    },
                    {
                        value: (React.createElement(Dropdown, { dataHook: `import-mapping-${header}`, clearButton: true, onClear: () => {
                                state.setMapping(header, null);
                            }, placeholder: t('cairo.import.skipColumn'), selectedId: state.mappingByHeader[header] ?? undefined, onSelect: ({ id }) => {
                                state.setMapping(header, id);
                            }, popoverProps: {
                                appendTo: 'window',
                                zIndex: 5001,
                                flip: true,
                                fixed: false,
                            }, options: baseDropdownOptions.map((option) => ({
                                ...option,
                                disabled: selectedFieldIds.has(String(option.id)) &&
                                    state.mappingByHeader[header] !== String(option.id),
                            })), size: "small" })),
                        width: COLUMN_WIDTHS.field,
                    },
                ] })))))));
}
export const ImportStepConfiguration = observer(_ImportStepConfiguration);
//# sourceMappingURL=ImportStepConfiguration.js.map