import {
  Box,
  Dropdown,
  Text,
  TableListItem,
  listItemSelectBuilder,
  SectionHelper,
} from '@wix/design-system';
import { ArrowRight } from '@wix/wix-ui-icons-common';
import { ImportState } from '@wix/bex-core';
import React from 'react';
import { observer } from 'mobx-react-lite';

export interface ImportStepConfigurationProps {
  state: ImportState;
}

const COLUMN_WIDTHS = {
  title: 'minmax(0, 150px)',
  arrow: '1fr',
  field: 'minmax(0, 250px)',
};
const SCROLLBAR_GUTTER: React.CSSProperties = { scrollbarGutter: 'stable' };

function _ImportStepConfiguration({ state }: ImportStepConfigurationProps) {
  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 (
    <Box direction="vertical" dataHook="import-mapping-step" gap="SP3">
      {hasNoRows && (
        <Box padding="0 SP4">
          <SectionHelper
            dataHook="import-no-rows-warning"
            skin="warning"
            title={t('cairo.import.noRowsWarningTitle')}
          >
            {t('cairo.import.noRowsWarningDescription')}
          </SectionHelper>
        </Box>
      )}

      <Box direction="vertical" flex={1} minHeight={0}>
        <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}
        >
          <Box minWidth={0} direction="vertical">
            <Text size="small" weight="thin" ellipsis>
              {t('cairo.import.columnTitle')}
            </Text>
          </Box>

          <Box minWidth={0} direction="vertical" />

          <Box minWidth={0} direction="vertical">
            <Text size="small" weight="thin" ellipsis>
              {t('cairo.import.collectionField')}
            </Text>
          </Box>
        </Box>

        <Box
          direction="vertical"
          overflowY="auto"
          maxHeight={hasNoRows ? 'calc(80vh - 420px)' : 'calc(80vh - 300px)'}
          style={SCROLLBAR_GUTTER}
        >
          {csvHeaders.map((header, index) => (
            <TableListItem
              key={header}
              showDivider={index < csvHeaders.length - 1}
              options={[
                {
                  value: (
                    <Text ellipsis size="small">
                      {header}
                    </Text>
                  ),
                  width: COLUMN_WIDTHS.title,
                },
                {
                  value: (
                    <Box align="center">
                      <ArrowRight />
                    </Box>
                  ),
                  width: COLUMN_WIDTHS.arrow,
                },
                {
                  value: (
                    <Dropdown
                      dataHook={`import-mapping-${header}`}
                      clearButton
                      onClear={() => {
                        state.setMapping(header, null);
                      }}
                      placeholder={t('cairo.import.skipColumn')}
                      selectedId={state.mappingByHeader[header] ?? undefined}
                      onSelect={({ id }) => {
                        state.setMapping(header, id as string);
                      }}
                      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,
                },
              ]}
            />
          ))}
        </Box>
      </Box>
    </Box>
  );
}

export const ImportStepConfiguration = observer(_ImportStepConfiguration);
