import { useParams, useSearchParams } from 'react-router-dom';
import { useQuery, gql } from '@apollo/client';
import { useQueryWithPreviousData } from 'lib/apollo';
import { DatasetQuery, DatasetQueryVariables } from 'types/graphql';

import { Box } from 'components/common';
import { ErrorScreen } from 'components/ErrorScreen';
import { DatasetContentHeader } from './DatasetContentHeader';
import { DatasetAnalytics } from './DatasetAnalytics';

import { PATHS as WORKSPACE } from '../index';
import { SEGMENT_KEY } from 'components/collection/DatasetItem';
import { SET_KEY } from './FiltersPanel';

export const DATASET = gql`
  query DATASET($id: ID!) {
    dataset: getCollection(collectionId: $id) {
      id
      parentId
      name
      status
      totalProfiles
      dateCreated
    }
  }
`;

export const DatasetContent = () => {
  const { [WORKSPACE.collectionId]: collectionId } = useParams();
  const [search] = useSearchParams();
  const segmentId = search.get(SEGMENT_KEY);
  const setId = search.get(SET_KEY);

  const queryResult = useQueryWithPreviousData<
    DatasetQuery,
    DatasetQueryVariables
  >(DATASET, {
    variables: { id: setId || segmentId || collectionId! },
    fetchPolicy: 'cache-and-network',
  });

  const collection = queryResult.data;

  const { data: parent } = useQuery(DATASET, {
    variables: { id: collectionId },
    fetchPolicy: 'cache-only',
  });

  if (queryResult.error) {
    return (
      <ErrorScreen message="Not found">
        Could not find {segmentId ? 'segment' : 'dataset'} with id{' '}
        <b>{segmentId || collectionId}</b>
      </ErrorScreen>
    );
  }

  return (
    <Box className="h100" display="flex" column>
      <DatasetContentHeader
        collection={collection?.dataset}
        parent={parent?.dataset}
      />
      <DatasetAnalytics />
    </Box>
  );
};