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

import type { CatalogEntityRevision } from '@redocly/theme/core/types';

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

export type CatalogEntityRevisionItemProps = {
  revisionItem: CatalogEntityRevision;
  basePath: string;
  version?: string | null;
};

export function CatalogEntityRevisionItem({
  revisionItem,
  basePath,
  version,
}: CatalogEntityRevisionItemProps): React.ReactElement {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();
  const revisionFilter = buildRevisionUrl(basePath, revisionItem.revisionDate, version) ?? basePath;
  const isActive = revisionItem.isActive ?? false;

  return (
    <RevisionItemWrapper to={revisionFilter} $isActive={isActive}>
      <RevisionNameRow>
        <RevisionName>{revisionItem.name}</RevisionName>
        {revisionItem.isCurrent && (
          <Tag
            color="grey"
            borderless
            textTransform="none"
            style={{
              fontSize: 'var(--font-size-xs)',
              borderRadius: 'var(--catalog-history-sidebar-revision-tag-border-radius)',
            }}
          >
            {translate('catalog.history.revision.current', 'current')}
          </Tag>
        )}
      </RevisionNameRow>
      <RevisionDate>{revisionItem.date}</RevisionDate>
    </RevisionItemWrapper>
  );
}

const RevisionItemWrapper = styled(Link)<{ $isActive?: boolean }>`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--catalog-history-sidebar-revision-item-padding);
  margin-left: calc(-1 * var(--catalog-history-sidebar-revisions-padding-left));
  padding-left: var(--catalog-history-sidebar-revisions-padding-left);
  border-radius: var(--catalog-history-sidebar-revision-item-border-radius);
  transition: 0.2s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  background-color: ${({ $isActive }) =>
    $isActive ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)' : 'transparent'};

  &:hover {
    background-color: ${({ $isActive }) =>
      $isActive
        ? 'var(--catalog-history-sidebar-revision-item-bg-color-active)'
        : 'var(--catalog-history-sidebar-revision-item-bg-color-hover)'};
  }
`;

const RevisionNameRow = styled.div`
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
`;

const RevisionName = styled.span`
  font-family: var(--catalog-history-sidebar-revision-name-font-family);
  font-size: var(--catalog-history-sidebar-revision-name-font-size);
  font-weight: var(--catalog-history-sidebar-revision-name-font-weight);
  line-height: var(--catalog-history-sidebar-revision-name-line-height);
  color: var(--catalog-history-sidebar-revision-name-color);
`;

const RevisionDate = styled.span`
  font-family: var(--catalog-history-sidebar-revision-date-font-family);
  font-size: var(--catalog-history-sidebar-revision-date-font-size);
  font-weight: var(--catalog-history-sidebar-revision-date-font-weight);
  line-height: var(--catalog-history-sidebar-revision-date-line-height);
  color: var(--catalog-history-sidebar-revision-date-color);
`;