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 { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
import { Tag } from '@redocly/theme/components/Tag/Tag';
import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
import { CatalogUserEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';

const teamColumns: CatalogColumn<BffCatalogRelatedEntity>[] = [
  {
    key: 'entity',
    title: 'User name',
    render: (entity) => (
      <CatalogUserEntityCell name={entity.title} email={entity.metadata?.email as string} />
    ),
    width: '3fr',
    sortable: true,
    sortKey: 'title',
  },
  {
    key: 'metadata.role',
    title: 'Role',
    render: (entity) => (entity.metadata?.role ? <Tag>{entity.metadata?.role}</Tag> : null),
    width: '2fr',
  },
  {
    key: 'description',
    title: 'Description',
    render: (entity) => <EntityDescription>{entity.summary}</EntityDescription>,
    width: '2fr',
  },
  {
    key: 'lastUpdate',
    title: 'Last update',
    render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
    width: '1fr',
    minWidth: '112px',
    sortable: true,
    sortKey: 'updated_at',
  },
];

export type CatalogEntityTeamRelationsProps = {
  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 CatalogEntityTeamRelations({
  entity,
  relations,
  query,
  searchQuery,
  setSearchQuery,
  setFilter,
  entitiesCatalogConfig,
  catalogConfig,
  sortOption,
  setSortOption,
  handleSortClick,
  isColumnSorted,
  shouldShowLoadMore,
}: CatalogEntityTeamRelationsProps): JSX.Element {
  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
      <Tabs size={TabsSize.MEDIUM}>
        <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
          <CatalogEntityRelationsTable
            key="members-table"
            entity={entity}
            entitiesCatalogConfig={entitiesCatalogConfig}
            catalogConfig={catalogConfig}
            relations={relations}
            query={query}
            searchQuery={searchQuery}
            setSearchQuery={setSearchQuery}
            columns={teamColumns}
            sortOption={sortOption}
            setSortOption={setSortOption}
            handleSortClick={handleSortClick}
            isColumnSorted={isColumnSorted}
            shouldShowLoadMore={shouldShowLoadMore}
            listType="team"
          />
        </TabItem>
        <TabItem
          label="Related entities"
          icon={<EntityTypeIcon />}
          onClick={() => setFilter('-type:user')}
        >
          <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>
    </div>
  );
}

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

const EntityDescription = styled.div`
  font-size: var(--catalog-table-entity-summary-font-size);
  line-height: var(--catalog-table-entity-summary-line-height);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
`;