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 { BffCatalogRelatedEntity } from '@redocly/theme/core/types';

import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
import {
  CatalogColumn,
  CatalogTableView,
} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
import { CatalogEntitiesEmptyState } from '@redocly/theme/components/Catalog/CatalogEntitiesEmptyState';

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

export function CatalogEntityRelationsTableContent({
  entitiesCatalogConfig,
  catalogConfig,
  relations,
  query,
  searchQuery,
  columns,
  sortOption,
  handleSortClick,
  isColumnSorted,
  shouldShowLoadMore,
  listType,
  onRowClick,
}: CatalogEntityRelationsTableContentProps): JSX.Element {
  return (
    <TableContentWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent">
      <HighlightContext.Provider value={[searchQuery]}>
        {relations.length > 0 ? (
          <CatalogTableView
            entities={relations}
            entitiesCatalogConfig={entitiesCatalogConfig}
            catalogConfig={catalogConfig}
            columns={columns}
            currentSortOption={sortOption}
            handleSortClick={handleSortClick}
            isColumnSorted={isColumnSorted}
            style={{ marginTop: 0 }}
            onRowClick={onRowClick}
            contentMinWidth={TABLE_SCROLL_MIN_WIDTH_PX}
          />
        ) : (
          <CatalogEntitiesEmptyState listType={listType} />
        )}
      </HighlightContext.Provider>
      {shouldShowLoadMore && (
        <LoadMore
          icon={<ArrowDownIcon size="var(--catalog-load-more-icon-size)" />}
          onClick={query.fetchNextPage}
          disabled={query.isFetchingNextPage}
          blinking={query.isFetchingNextPage}
          label={query.isFetchingNextPage ? 'Loading...' : 'Load More'}
        />
      )}
    </TableContentWrapper>
  );
}

const TABLE_SCROLL_MIN_WIDTH_PX = 608;

const TableContentWrapper = styled.div`
  min-width: 0; /* Constrain width so table overflow-x scroll works inside tabs */
`;