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

import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
import { customCatalogOptionsCasing } from '@redocly/theme/core/utils';

export type CatalogEntityRelationsNodeContentProps = {
  entityType: string;
  label: string;
  isRoot: boolean;
};

export function CatalogEntityRelationsNodeContent({
  entityType,
  label,
  isRoot,
}: CatalogEntityRelationsNodeContentProps): React.ReactElement {
  const formattedEntityType = customCatalogOptionsCasing(entityType);

  return (
    <CatalogEntityRelationsNodeContentWrapper
      isRoot={isRoot}
      data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent"
    >
      <CatalogEntityRelationsNodeTypeRow isRoot={isRoot}>
        {isRoot ? (
          <CatalogEntityIcon
            entityType={entityType}
            forceColor="var(--catalog-entity-relations-node-root-icon-color)"
          />
        ) : (
          <CatalogEntityIcon entityType={entityType} defaultColor={false} />
        )}
        <span>{formattedEntityType}</span>
      </CatalogEntityRelationsNodeTypeRow>
      <CatalogEntityRelationsNodeLabelRow isRoot={isRoot}>
        {label}
      </CatalogEntityRelationsNodeLabelRow>
    </CatalogEntityRelationsNodeContentWrapper>
  );
}

const CatalogEntityRelationsNodeTypeRow = styled.div<{ isRoot: boolean }>`
  display: flex;
  align-items: center;
  gap: var(--catalog-entity-relations-node-gap);
  line-height: var(--line-height-sm);
  font-size: var(--font-size-sm);
  color: ${({ isRoot }) =>
    isRoot
      ? 'var(--catalog-entity-relations-node-root-text-color)'
      : 'var(--text-color-description)'};
`;

const CatalogEntityRelationsNodeLabelRow = styled.div<{ isRoot: boolean }>`
  display: flex;
  align-items: center;
  gap: var(--catalog-entity-relations-node-gap);
  line-height: var(--line-height-lg);
  font-size: var(--font-size-lg);
  color: ${({ isRoot }) =>
    isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
`;

const CatalogEntityRelationsNodeContentWrapper = styled.div<{ isRoot: boolean }>`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--catalog-entity-relations-node-gap);
  padding: var(--catalog-entity-relations-node-padding);
  border-radius: var(--catalog-entity-relations-node-border-radius);
  font-style: normal;
  font-weight: var(--catalog-entity-relations-node-font-weight);
  background: ${({ isRoot }) =>
    isRoot
      ? 'var(--catalog-entity-relations-node-root-bg-color)'
      : 'var(--catalog-entity-relations-node-bg-color)'};
  border: ${({ isRoot }) =>
    isRoot
      ? 'none'
      : `var(--catalog-entity-relations-node-border-width) var(--catalog-entity-relations-node-border-style) var(--catalog-entity-relations-node-border-color)`};
`;