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

import { BffCatalogEntity } from '@redocly/theme/core/types';
import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
import { useThemeHooks } from '@redocly/theme/core/hooks';

export type CatalogEntityMethodAndPathProps = {
  entity: BffCatalogEntity;
};

export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPathProps) {
  const { useTranslate } = useThemeHooks();
  const { translate } = useTranslate();

  const method = entity.metadata?.method;
  const path = entity.metadata?.path;

  if (!method || !path) {
    return null;
  }

  return (
    <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMethodAndPath">
      <Heading>{translate('catalog.methodAndPath.label', 'Method & Path')}</Heading>
      <CatalogEntityInfoBar
        leftContent={
          <Label>
            <MethodTag color={method.toLowerCase()}>{method}</MethodTag>
            <PathLabel>{path}</PathLabel>
          </Label>
        }
        withSeparator={false}
      />
    </LinksWrapper>
  );
}

const MethodTag = styled(HttpTag)`
  width: auto;
  justify-content: start;
`;

const PathLabel = styled.label`
  margin-left: var(--spacing-xxs);
`;

const LinksWrapper = styled.div`
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius);
  background-color: var(--catalog-metadata-bg-color);
  transition: all 0.2s ease-in-out;
  margin: 0 0 var(--spacing-base) 0;
`;

const Label = styled.div`
  display: flex;
  width: 100%;
`;

const Heading = styled.h2`
  margin-bottom: var(--spacing-sm);
  margin-top: 0;
  font-size: var(--font-size-md);
  color: var(--catalog-metadata-heading-color);
`;