import React from 'react';
import styled from 'styled-components';

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { getScorecardColorVariable } from '@redocly/theme/core/utils';
import { Tag } from '@redocly/theme/components/Tag/Tag';
import { Link } from '@redocly/theme/components/Link/Link';

export type CatalogInfoBlockProps = {
  metadata?: {
    scorecardLevel?: string;
    scoreCardSlug?: string;
    scorecardLevelIdx?: number;
    scorecardLevels?: Record<string, any>;

    [key: string]: unknown;
  };
};

export function CatalogInfoBlock(props: CatalogInfoBlockProps): JSX.Element {
  const scorecardBadge = props.metadata?.scorecardLevel ? (
    <ScorecardBadge
      level={props.metadata.scorecardLevel as string}
      slug={props.metadata?.scoreCardSlug as string}
      colorVariable={getScorecardColorVariable(
        props.metadata?.scorecardLevelIdx || 0,
        Object.keys(props.metadata?.scorecardLevels || {}).length,
      )}
    />
  ) : null;

  return (
    <CatalogInfoBlockWrapper>
      <CatalogBadgesWrapper data-component-name="Catalog/CatalogInfoBlock">
        {scorecardBadge}
      </CatalogBadgesWrapper>
    </CatalogInfoBlockWrapper>
  );
}

function ScorecardBadge(props: {
  level: string;
  slug: string;
  colorVariable: string;
}): JSX.Element {
  const { level, slug, colorVariable } = props;
  const { useTelemetry } = useThemeHooks();
  const telemetry = useTelemetry();
  return (
    <Link to={slug}>
      <Tag
        onClick={() => telemetry.send('scorecard_link_clicked', { action: 'click' })}
        withStatusDot
        statusDotColor={`var(${colorVariable})`}
      >
        {level}
      </Tag>
    </Link>
  );
}

const CatalogInfoBlockWrapper = styled.div`
  position: relative;
  width: 100%;
`;

const CatalogBadgesWrapper = styled.div`
  &:empty {
    display: none;
  }

  position: absolute;
  z-index: 10;
  right: 0;
  margin-top: var(--panel-gap-vertical);

  --badge-border-radius: var(--catalog-page-badge-border-radius);
  --badge-padding: var(--catalog-page-badge-padding);
  --badge-font-size: var(--catalog-page-badge-font-size);
  --badge-line-height: var(--catalog-page-badge-line-height);
  --badge-dot-size: var(--catalog-page-badge-dot-size);
  --badge-dot-border-color: var(--catalog-page-badge-dot-border-color);
`;