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

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

import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';

export type CatalogEntityApiDescriptionRelationsProps = {
  entity: BffCatalogEntity;
  catalogConfig: CatalogEntityConfig;
  entitiesCatalogConfig: EntitiesCatalogConfig;
  relations: BffCatalogRelatedEntity[];
  query: {
    fetchNextPage: () => void;
    isFetchingNextPage: boolean;
    hasNextPage: boolean;
  };
  searchQuery: string;
  setSearchQuery: (query: string) => void;
  setFilter: (filter?: 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;
};

export function CatalogEntityApiDescriptionRelations({
  entity,
  relations,
  query,
  searchQuery,
  setSearchQuery,
  setFilter,
  entitiesCatalogConfig,
  catalogConfig,
  sortOption,
  setSortOption,
  handleSortClick,
  isColumnSorted,
  shouldShowLoadMore,
}: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
  return (
    <TabsWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
        <TabItem
          label="Operations"
          icon={<MoleculesIcon />}
          onClick={() => setFilter('type:api-operation')}
        >
          <CatalogEntityDefaultRelations
            key="operations-table"
            entity={entity}
            relations={relations}
            query={query}
            searchQuery={searchQuery}
            setSearchQuery={setSearchQuery}
            entitiesCatalogConfig={entitiesCatalogConfig}
            catalogConfig={catalogConfig}
            sortOption={sortOption}
            setSortOption={setSortOption}
            handleSortClick={handleSortClick}
            isColumnSorted={isColumnSorted}
            shouldShowLoadMore={shouldShowLoadMore}
            shouldShowHeading={false}
            listType="api-operation"
          />
        </TabItem>
        <TabItem
          label="Schemas"
          icon={<NetworkIcon />}
          onClick={() => setFilter('type:data-schema')}
        >
          <CatalogEntityDefaultRelations
            key="schemas-table"
            entity={entity}
            relations={relations}
            query={query}
            searchQuery={searchQuery}
            setSearchQuery={setSearchQuery}
            entitiesCatalogConfig={entitiesCatalogConfig}
            catalogConfig={catalogConfig}
            sortOption={sortOption}
            setSortOption={setSortOption}
            handleSortClick={handleSortClick}
            isColumnSorted={isColumnSorted}
            shouldShowLoadMore={shouldShowLoadMore}
            shouldShowHeading={false}
            listType="data-schema"
          />
        </TabItem>
        <TabItem
          label="Related entities"
          icon={<EntityTypeIcon />}
          onClick={() => setFilter('-type:api-operation,data-schema')}
        >
          <CatalogEntityDefaultRelations
            key="related-entities-table"
            entity={entity}
            relations={relations}
            query={query}
            searchQuery={searchQuery}
            setSearchQuery={setSearchQuery}
            entitiesCatalogConfig={entitiesCatalogConfig}
            catalogConfig={catalogConfig}
            sortOption={sortOption}
            setSortOption={setSortOption}
            handleSortClick={handleSortClick}
            isColumnSorted={isColumnSorted}
            shouldShowLoadMore={shouldShowLoadMore}
            shouldShowHeading={false}
          />
        </TabItem>
      </Tabs>
    </TabsWrapper>
  );
}

const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
  padding: var(--spacing-sm);
`;

const TabsWrapper = styled.div`
  --md-tabs-container-margin: none;
`;