import React, { JSX } from 'react';
import styled from 'styled-components';

import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
import type { ListType } from '@redocly/theme/core/types';
import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';

import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
import { CatalogEntityRelationsTableContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent';
import { useCatalogEntityDetails, useThemeHooks } from '@redocly/theme/core/hooks';
import { reverseRelationMap } from '@redocly/theme/core/constants';

export type CatalogEntityRelationsTableProps = {
  entity: BffCatalogEntity;
  entitiesCatalogConfig: EntitiesCatalogConfig;
  catalogConfig: CatalogEntityConfig;
  relations: BffCatalogRelatedEntity[];
  query: {
    fetchNextPage: () => void;
    isFetchingNextPage: boolean;
  };
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  heading?: string;
  columns: CatalogColumn<BffCatalogRelatedEntity>[];
  sortOption: string | null;
  setSortOption: (sortOption: string | null) => void;
  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
  shouldShowLoadMore: boolean;
  listType?: ListType;
};

export function CatalogEntityRelationsTable({
  entity,
  entitiesCatalogConfig,
  catalogConfig,
  relations,
  query,
  searchQuery,
  setSearchQuery,
  heading,
  columns,
  setSortOption,
  sortOption,
  handleSortClick,
  isColumnSorted,
  shouldShowLoadMore,
  listType,
}: CatalogEntityRelationsTableProps): JSX.Element {
  const { useTelemetry } = useThemeHooks();
  const telemetry = useTelemetry();
  const { getEntityDetailsLink } = useCatalogEntityDetails({
    catalogConfig,
    entitiesCatalogConfig,
  });

  const onRowClick = (relatedEntity: BffCatalogRelatedEntity) => {
    if (searchQuery) {
      telemetry.sendCatalogEntitiesRelatedEntitiesListSearchResultClickMessage([
        {
          id: relatedEntity.id,
          object: 'catalog_entity',
          uri: getEntityDetailsLink(relatedEntity),
          query: searchQuery,
          entityKey: entity.key,
          entityType: entity.type,
          relationType: reverseRelationMap[relatedEntity.relationType],
          relatedEntityKey: relatedEntity.key,
          relatedEntityType: relatedEntity.type,
        },
      ]);
    }
  };

  return (
    <CatalogEntityRelationsTableWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable">
      {heading && <Heading>{heading}</Heading>}
      <CatalogActionsRow
        searchQuery={searchQuery}
        setSearchQuery={setSearchQuery}
        sortOption={sortOption}
        setSortOption={setSortOption}
        viewMode="table"
        isDetailsPage={true}
      />
      <CatalogEntityRelationsTableContent
        entitiesCatalogConfig={entitiesCatalogConfig}
        catalogConfig={catalogConfig}
        relations={relations}
        query={query}
        searchQuery={searchQuery}
        columns={columns}
        sortOption={sortOption}
        handleSortClick={handleSortClick}
        isColumnSorted={isColumnSorted}
        shouldShowLoadMore={shouldShowLoadMore}
        listType={listType}
        onRowClick={onRowClick}
      />
    </CatalogEntityRelationsTableWrapper>
  );
}

const CatalogEntityRelationsTableWrapper = styled.div`
  min-width: 0;
`;

const Heading = styled.h2`
  margin: 0 0 var(--spacing-base) 0;
  font-size: var(--font-size-md);
  color: var(--catalog-metadata-heading-color);
`;