import { useParams } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import { MAP_DATA_PROPS } from 'components/import/schema';
import { MapDataPropsQuery, MapDataPropsQueryVariables } from 'types/graphql';

import { Spinner } from 'components/common';
import { ErrorScreen } from 'components/ErrorScreen';
import { ErrorBoundary } from 'components/ErrorBoundary';

import { MapData } from './MapData';

import { PATHS as WORKSPACE } from '../index';

function convertRowsToColumns(arr: string[][] = []): string[][] {
  const rows = arr.map((item) => Object.values(item));
  const cols = rows[0].map((col, i) => {
    // map data to each column
    return rows.map((row, c) => {
      // return item at column index
      return row[i];
    });
  });
  return cols;
}

export const MapDataPage = () => {
  const { [WORKSPACE.collectionId]: collectionId } = useParams();

  const { data, loading, error } = useQuery<
    MapDataPropsQuery,
    MapDataPropsQueryVariables
  >(MAP_DATA_PROPS, {
    variables: { collectionId: collectionId! },
  });

  if (error) return <ErrorScreen>{error.message}</ErrorScreen>;

  const renderData = (data: MapDataPropsQuery) => {
    const {
      collection,
      fileHeaders,
      fileContent,
      dataLabels,
      suggestedLabels,
    } = data;
    const fileKeys: string[] = JSON.parse(fileHeaders)[0];
    const parsedContent: string[][] = JSON.parse(fileContent);
    const fileData = convertRowsToColumns(parsedContent);
    const initialState = fileKeys.map((key, i) =>
      suggestedLabels[i] ? suggestedLabels[i].value : ''
    );

    return (
      <MapData
        fileName={collection?.name}
        fileKeys={fileKeys}
        fileData={fileData}
        dataLabels={dataLabels}
        initialState={initialState}
      />
    );
  };

  return (
    <ErrorBoundary>
      {!loading && data && renderData(data)}
      <Spinner show={loading} />
    </ErrorBoundary>
  );
};