import * as React from 'react';
import { DataViz } from './DataViz';
import { ConnectedDataVizProps } from './types';
import ErrorMessage from '../ErrorMessage';
import { LoadingMessage } from '../LoadingMessage';
import { useDataViz } from '../../api/profiles';

export const ConnectedDataViz: React.FC<ConnectedDataVizProps> = ({
  dataVizID,
  geogIdentifier,
  variant,
}) => {
  const { name } = dataVizID || {};
  const { dataViz, isLoading, error } = useDataViz(dataVizID, geogIdentifier);

  if (!!error) {
    return <ErrorMessage title={`${name} Not Found`} message={error} />;
  }
  if (isLoading) {
    return <LoadingMessage name={name} />;
  }
  if (!!dataViz && !!dataVizID) {
    return (
      <DataViz
        dataViz={dataViz}
        geogIdentifier={geogIdentifier}
        isLoading={isLoading}
        error={error}
        variant={variant}
      />
    );
  }
  return (
    <ErrorMessage title={`Unknown Error`} message={'Please let us know.'} />
  );
};
