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

import type { CatalogEntityConfig } from '@redocly/config';

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { useThemeHooks } from '@redocly/theme/core/hooks';
import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
import { getPathPrefix } from '@redocly/theme/core/utils';

export type CatalogCardProps = {
  entity: BffCatalogEntity;
  catalogConfig: CatalogEntityConfig;
};

export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.Element {
  const { useTelemetry, useTranslate } = useThemeHooks();
  const { translate } = useTranslate();
  const telemetry = useTelemetry();
  const pathPrefix = getPathPrefix();

  return (
    <CatalogCardWrapper
      data-component-name="Catalog/CatalogCardView/CatalogCard"
      onClick={() => {
        window.location.assign(
          `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`,
        );
        telemetry.sendCatalogItemClickedMessage();
      }}
    >
      <CardContent>
        <CardHeader>
          <HeaderIconWrapper>
            <CatalogEntityIcon entityType={entity.type} />
          </HeaderIconWrapper>
          <HeaderIconText entityType={entity.type}>{entity.type}</HeaderIconText>
        </CardHeader>

        <CardDescription>
          <CardTitle>
            <CatalogHighlight>{entity.title}</CatalogHighlight>
          </CardTitle>
          <CardSummary>
            <CatalogHighlight>{entity.summary ?? ''}</CatalogHighlight>
          </CardSummary>
        </CardDescription>

        <CardMetadataSection>
          <MetadataRow>
            <MetadataLabel>{translate('catalog.metadata.domains', 'Domains:')}</MetadataLabel>
            <CatalogTags
              items={entity.domains?.map((domain) => domain.title) || []}
              showPlaceholder={true}
              tagProps={{
                style: {
                  fontSize: 'var(--catalog-card-font-size)',
                  backgroundColor: 'var(--catalog-card-icon-bg-color)',
                },
                icon: <GraphIcon color="var(--color-green-8)" />,
                textTransform: 'none',
                variant: 'outline',
              }}
            />
          </MetadataRow>

          <MetadataRow>
            <MetadataLabel>{translate('catalog.metadata.owners', 'Owners:')}</MetadataLabel>
            <CatalogTags
              items={entity.owners?.map((owner) => owner.key) || []}
              showPlaceholder={true}
              showAvatars={true}
              tagProps={{
                style: {
                  fontSize: 'var(--catalog-card-font-size)',
                  backgroundColor: 'var(--catalog-card-icon-bg-color)',
                  borderRadius: 'var(--border-radius-xl)',
                },
                textTransform: 'none',
                variant: 'outline',
              }}
            />
          </MetadataRow>
        </CardMetadataSection>
      </CardContent>

      <Divider />

      <CardFooter hasTags={!!entity.tags?.length}>
        <CatalogTags
          items={entity.tags || []}
          tagProps={{
            style: {
              fontSize: 'var(--catalog-card-font-size)',
              borderRadius: 'var(--border-radius)',
            },
            borderless: true,
            color: 'grey',
            textTransform: 'none',
          }}
          itemsToShow={3}
        />

        <ArrowCircle>
          <ArrowRightIcon size="16px" />
          <ArrowUpRightIcon size="16px" />
        </ArrowCircle>
      </CardFooter>
    </CatalogCardWrapper>
  );
}

const HeaderIconWrapper = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--catalog-card-icon-width);
  height: var(--catalog-card-icon-height);
  border-radius: var(--catalog-card-icon-border-radius);
  background-color: var(--catalog-card-icon-bg-color);
  flex-shrink: 0;
  border: var(--catalog-card-icon-border-width) solid var(--catalog-card-icon-border-color);
  margin-right: var(--catalog-card-icon-margin-right);
`;

const HeaderIconText = styled.div<{ entityType: string }>`
  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
`;

const CardHeader = styled.div`
  display: flex;
  align-items: center;
`;

const MetadataLabel = styled.div`
  font-size: var(--catalog-metadata-label-font-size);
  font-weight: var(--catalog-metadata-label-font-weight);
  color: var(--catalog-metadata-label-color);
`;

const CardMetadataSection = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: var(--catalog-metadata-section-margin-top);
  gap: var(--catalog-metadata-section-gap);
  width: 100%;
`;

const MetadataRow = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--catalog-metadata-row-gap);
`;

const ArrowCircle = styled.div`
  width: var(--catalog-arrow-circle-size);
  height: var(--catalog-arrow-circle-size);
  border-radius: var(--catalog-arrow-circle-radius);
  background-color: var(--catalog-arrow-circle-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  ${ArrowRightIcon}, ${ArrowUpRightIcon} {
    position: absolute;
    transition: opacity 0.2s ease-in-out;
  }
`;

const CardContent = styled.div`
  min-width: 0;
  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
`;

const CardFooter = styled.div<{ hasTags: boolean }>`
  height: var(--catalog-card-footer-height);
  display: flex;
  align-items: center;
  justify-content: ${({ hasTags }) => (hasTags ? 'space-between' : 'flex-end')};
  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
`;

const Divider = styled.div`
  width: 100%;
  height: 1px;
  background-color: var(--catalog-card-divider-color);
`;

const CatalogCardWrapper = styled.div`
  min-width: 0;
  max-width: 100%;
  color: var(--catalog-card-text-color);
  font-size: var(--catalog-card-font-size);
  font-weight: var(--catalog-card-font-weight);
  background-color: var(--catalog-card-bg-color);
  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
    var(--catalog-card-border-color);
  transition: all 0.2s ease-in-out;
  border-radius: var(--catalog-card-border-radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  ${ArrowRightIcon} {
    opacity: 1;
  }
  ${ArrowUpRightIcon} {
    opacity: 0;
  }
  &:hover {
    ${ArrowRightIcon} {
      opacity: 0;
    }
    ${ArrowUpRightIcon} {
      opacity: 1;
    }
    border-color: var(--catalog-card-border-color-hover);
  }
`;

const CardTitle = styled.div`
  color: var(--catalog-card-title-color);
  font-size: var(--catalog-card-title-font-size);
  font-weight: var(--catalog-card-title-font-weight);
  line-height: var(--catalog-card-title-line-height);
  height: var(--catalog-card-title-height);
  display: var(--catalog-card-title-display);
  align-items: var(--catalog-card-title-align-items);
  margin-bottom: var(--catalog-card-title-margin-bottom);
`;

const CardSummary = styled.div`
  min-width: 0;
  font-size: var(--catalog-card-summary-font-size);
  font-weight: var(--catalog-card-summary-font-weight);
  line-height: var(--catalog-card-summary-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
`;

const CardDescription = styled.div`
  margin-top: var(--catalog-card-description-margin-top);
  color: var(--catalog-card-description-color);
  font-size: var(--catalog-card-description-font-size);
  font-weight: var(--catalog-card-description-font-weight);
  line-height: var(--catalog-card-description-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
`;