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

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { EntityTypeProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty';
import { GitProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty';
import { TagsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty';
import { UserEmailProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty';
import { DomainsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty';
import { OwnersProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty';
import { ContactProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty';
import { FormatProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty';
import { breakpoints } from '@redocly/theme/core';

type PropertyRenderer = {
  key: string;
  condition: (entity: BffCatalogEntity) => boolean;
  component: React.ComponentType<{ entity: BffCatalogEntity }>;
};

const propertyRenderers: PropertyRenderer[] = [
  {
    key: 'type',
    condition: (entity) => !!entity.type,
    component: EntityTypeProperty,
  },
  {
    key: 'format',
    condition: (entity) => entity.type === 'data-schema' && !!entity.metadata?.specType,
    component: FormatProperty,
  },
  {
    key: 'contact',
    condition: (entity) => !!entity.contact?.slack?.channels,
    component: ContactProperty,
  },
  {
    key: 'git',
    condition: (entity) => !!entity.git,
    component: GitProperty,
  },
  {
    key: 'tags',
    condition: (entity) => !!entity.tags?.length,
    component: TagsProperty,
  },
  {
    key: 'user-email',
    condition: (entity) => entity.type === 'user' && !!entity.metadata?.email,
    component: UserEmailProperty,
  },
  {
    key: 'domains',
    condition: (entity) => (entity.domains?.length ?? 0) > 0,
    component: DomainsProperty,
  },
  {
    key: 'owners',
    condition: (entity) => (entity.owners?.length ?? 0) > 0,
    component: OwnersProperty,
  },
];

export type CatalogEntityPropertiesProps = {
  entity: BffCatalogEntity;
};

export function CatalogEntityProperties({ entity }: CatalogEntityPropertiesProps): JSX.Element {
  const renderers = propertyRenderers.filter((renderer) => renderer.condition(entity));

  return (
    <CatalogEntityPropertiesGridWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties">
      {renderers.map((renderer) => (
        <renderer.component key={renderer.key + entity.id} entity={entity} />
      ))}
    </CatalogEntityPropertiesGridWrapper>
  );
}

const CatalogEntityPropertiesGridWrapper = styled.div`
  display: grid;
  gap: var(--spacing-base);
  grid-template-columns: 1fr;
  margin-bottom: var(--spacing-lg);

  @media screen and (min-width: ${breakpoints.small}) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (min-width: ${breakpoints.max}) {
    grid-template-columns: repeat(3, 1fr);
  }
`;