import { Link, useParams } from 'react-router-dom';
import { useQuery, gql } from '@apollo/client';
import { SegmentsQuery, SegmentsQueryVariables } from 'types/graphql';

import { useUrlSearchParams } from 'hooks/useUrlSearchParams';

import { Box } from 'components/common';
import { SegmentsList } from './SegmentsList';
import { FiltersPanel } from './FiltersPanel';

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

const SEGMENTS = gql`
  query SEGMENTS($collectionId: ID!) {
    segments: getCollections(parentId: $collectionId) {
      id
      parentId
      name
      status
      totalProfiles
      dateCreated
    }
  }
`;

export const DatasetSidebar = () => {
  const { [WORKSPACE.collectionId]: collectionId } = useParams();
  const { [FILTER_KEY]: filter } = useUrlSearchParams();

  const { data: segmentsData } = useQuery<
    SegmentsQuery,
    SegmentsQueryVariables
  >(SEGMENTS, {
    variables: { collectionId: collectionId! },
    fetchPolicy: 'cache-only',
  });

  return (
    <Box
      height="100%"
      flex="none"
      overflow="auto"
      display="flex"
      column
      className="customScroll"
      style={{
        borderRight: '1px solid var(--borderColor)',
      }}
    >
      {filter ? (
        <FiltersPanel />
      ) : (
        <Box>
          <Box
            as={Link}
            to="../../"
            height={48}
            display="flex"
            flex="none"
            align="center"
            paddingX={3}
            className="paddingX3 paddingY4 hover1 bold tdn"
          >
            Back to workpace
          </Box>
          <SegmentsList data={segmentsData?.segments} />
        </Box>
      )}
    </Box>
  );
};