bigcapital/packages/webapp/src/containers/Import/ImportFileMapping.tsx

import { useMemo } from 'react';
import clsx from 'classnames';
import { Button, Intent, Position } from '@blueprintjs/core';
import { useFormikContext } from 'formik';
import { FSelect, Group, Hint } from '@/components';
import { ImportFileMappingForm } from './ImportFileMappingForm';
import { EntityColumn, useImportFileContext } from './ImportFileProvider';
import { CLASSES } from '@/constants';
import { ImportFileContainer } from './ImportFileContainer';
import { ImportStepperStep } from './_types';
import { ImportFileMapBootProvider } from './ImportFileMappingBoot';
import styles from './ImportFileMapping.module.scss';

export function ImportFileMapping() {
  const { importId } = useImportFileContext();

  return (
    <ImportFileMapBootProvider importId={importId}>
      <ImportFileMappingForm>
        <ImportFileContainer>
          <p>
            Review and map the column headers in your csv/xlsx file with the
            Bigcapital fields.
          </p>

          <table className={clsx('bp4-html-table', styles.table)}>
            <thead>
              <tr>
                <th className={styles.label}>Bigcapital Fields</th>
                <th className={styles.field}>Sheet Column Headers</th>
              </tr>
            </thead>
            <tbody>
              <ImportFileMappingFields />
            </tbody>
          </table>
        </ImportFileContainer>

        <ImportFileMappingFloatingActions />
      </ImportFileMappingForm>
    </ImportFileMapBootProvider>
  );
}

function ImportFileMappingFields() {
  const { entityColumns, sheetColumns } = useImportFileContext();

  const items = useMemo(
    () => sheetColumns.map((column) => ({ value: column, text: column })),
    [sheetColumns],
  );
  const columnMapper = (column: EntityColumn, index: number) => (
    <tr key={index}>
      <td className={styles.label}>
        {column.name}{' '}
        {column.required && <span className={styles.requiredSign}>*</span>}
      </td>
      <td className={styles.field}>
        <Group spacing={4}>
          <FSelect
            name={column.key}
            items={items}
            popoverProps={{ minimal: true }}
            minimal={true}
            fill={true}
          />
          {column.hint && (
            <Hint content={column.hint} position={Position.BOTTOM} />
          )}
        </Group>
      </td>
    </tr>
  );
  const columns = entityColumns.map(columnMapper);

  return <>{columns}</>;
}

function ImportFileMappingFloatingActions() {
  const { isSubmitting } = useFormikContext();
  const { setStep } = useImportFileContext();

  const handleCancelBtnClick = () => {
    setStep(ImportStepperStep.Upload);
  };

  return (
    <div className={clsx(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
      <Group spacing={10}>
        <Button onClick={handleCancelBtnClick}>Back</Button>
        <Button type="submit" intent={Intent.PRIMARY} loading={isSubmitting}>
          Next
        </Button>
      </Group>
    </div>
  );
}