import React, { JSX } from 'react';

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
import { Tag } from '@redocly/theme/components/Tag/Tag';
import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export type ContactPropertyProps = {
  entity: BffCatalogEntity;
};

export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const channels = entity.contact?.slack?.channels;

  return (
    <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty">
      <CatalogEntityPropertyCard
        header={
          <>
            <SlackIcon />
            {translate('catalog.contact.label', 'Slack channels')}
          </>
        }
        content={
          <>
            {channels?.map((channel) => (
              <Tag
                key={channel.name}
                textTransform="none"
                style={{ backgroundColor: 'var(--bg-color)', cursor: 'pointer' }}
                onClick={() => {
                  if (channel.url) {
                    window.open(channel.url, '_blank');
                  }
                }}
              >
                {channel.name}
              </Tag>
            ))}
          </>
        }
      />
    </div>
  );
}