"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.ImportStepConfiguration = void 0;
var _designSystem = require("@wix/design-system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _react = _interopRequireDefault(require("react"));
var _mobxReactLite = require("mobx-react-lite");
var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/ImportButton/ImportStepConfiguration.tsx";
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 => (0, _designSystem.listItemSelectBuilder)({
    id: field.id,
    label: field.header,
    title: field.header
  }));
  const {
    selectedFieldIds
  } = state;
  const hasNoRows = state.csvRows.length === 0;
  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    dataHook: "import-mapping-step",
    gap: "SP3",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 43,
      columnNumber: 5
    }
  }, hasNoRows && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    padding: "0 SP4",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 45,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.SectionHelper, {
    dataHook: "import-no-rows-warning",
    skin: "warning",
    title: t('cairo.import.noRowsWarningTitle'),
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 46,
      columnNumber: 11
    }
  }, t('cairo.import.noRowsWarningDescription'))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    flex: 1,
    minHeight: 0,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 56,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.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,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 57,
      columnNumber: 9
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    minWidth: 0,
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 68,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    weight: "thin",
    ellipsis: true,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 69,
      columnNumber: 13
    }
  }, t('cairo.import.columnTitle'))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    minWidth: 0,
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 74,
      columnNumber: 11
    }
  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    minWidth: 0,
    direction: "vertical",
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 76,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
    size: "small",
    weight: "thin",
    ellipsis: true,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 77,
      columnNumber: 13
    }
  }, t('cairo.import.collectionField')))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
    direction: "vertical",
    overflowY: "auto",
    maxHeight: hasNoRows ? 'calc(80vh - 420px)' : 'calc(80vh - 300px)',
    style: SCROLLBAR_GUTTER,
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 83,
      columnNumber: 9
    }
  }, csvHeaders.map((header, index) => /*#__PURE__*/_react.default.createElement(_designSystem.TableListItem, {
    key: header,
    showDivider: index < csvHeaders.length - 1,
    options: [{
      value: /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
        ellipsis: true,
        size: "small",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 96,
          columnNumber: 21
        }
      }, header),
      width: COLUMN_WIDTHS.title
    }, {
      value: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
        align: "center",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 104,
          columnNumber: 21
        }
      }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ArrowRight, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 105,
          columnNumber: 23
        }
      })),
      width: COLUMN_WIDTHS.arrow
    }, {
      value: /*#__PURE__*/_react.default.createElement(_designSystem.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",
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 112,
          columnNumber: 21
        }
      }),
      width: COLUMN_WIDTHS.field
    }],
    __self: this,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 90,
      columnNumber: 13
    }
  })))));
}
const ImportStepConfiguration = exports.ImportStepConfiguration = (0, _mobxReactLite.observer)(_ImportStepConfiguration);
//# sourceMappingURL=ImportStepConfiguration.js.map