import React, { JSX } from 'react';

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 { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';

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

export function CatalogEntityDefaultRelations({
  entity,
  relations,
  query,
  searchQuery,
  setSearchQuery,
  entitiesCatalogConfig,
  catalogConfig,
  sortOption,
  setSortOption,
  handleSortClick,
  isColumnSorted,
  shouldShowLoadMore,
  shouldShowHeading = true,
  listType,
}: CatalogEntityDefaultRelationsProps): JSX.Element {
  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations">
      <CatalogEntityRelationsTable
        entity={entity}
        catalogConfig={catalogConfig}
        entitiesCatalogConfig={entitiesCatalogConfig}
        relations={relations}
        query={query}
        searchQuery={searchQuery}
        setSearchQuery={setSearchQuery}
        heading={shouldShowHeading ? 'Related entities' : undefined}
        columns={getRelationsTableColumns(listType)}
        sortOption={sortOption}
        setSortOption={setSortOption}
        handleSortClick={handleSortClick}
        isColumnSorted={isColumnSorted}
        shouldShowLoadMore={shouldShowLoadMore}
        listType={listType}
      />
    </div>
  );
}

function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalogRelatedEntity>[] {
  const columns: CatalogColumn<BffCatalogRelatedEntity>[] = [
    {
      key: 'entity',
      title: 'Entity',
      render: (entity) => <CatalogEntityCell entity={entity} />,
      sortable: true,
      sortKey: 'title',
      width: '4fr',
    },
    {
      key: 'type',
      title: 'Type',
      render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
      sortable: true,
      sortKey: 'type',
      width: '2fr',
    },
    {
      key: 'relationType',
      title: 'Relations',
      render: (entity) => (
        <CatalogEntityRelationCell
          relationType={entity.relationType}
          relationRole={entity.relationRole}
        />
      ),
      width: '2fr',
      sortable: true,
      sortKey: 'relation_type',
    },
    {
      key: 'lastUpdate',
      title: 'Last update',
      render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
      width: '1fr',
      minWidth: '112px',
      sortable: true,
      sortKey: 'updated_at',
    },
  ];

  if (listType === 'api-operation' || listType === 'data-schema') {
    return columns.filter((column) => column.key !== 'type');
  }

  return columns;
}