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

import type { JSX } from 'react';

import { useThemeHooks } from '@redocly/theme/core/hooks';
import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';

export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
  const { useBreadcrumbs, useOtelTelemetry } = useThemeHooks();
  const otelTelemetry = useOtelTelemetry();
  const breadcrumbs = useBreadcrumbs();

  if (breadcrumbs.length === 0) {
    return null;
  }

  return (
    <BreadcrumbsWrapper data-component-name="Breadcrumbs/Breadcrumbs" className={props.className}>
      {breadcrumbs.map((breadcrumb, idx) => {
        const isLast = idx === breadcrumbs.length - 1;
        return (
          <React.Fragment key={idx}>
            <Breadcrumb
              link={breadcrumb.link}
              label={breadcrumb.label}
              isActive={isLast}
              onClick={() => {
                otelTelemetry.send({
                  type: 'breadcrumb.clicked',
                  payload: {
                    link: breadcrumb.link,
                    position: idx + 1,
                    total_breadcrumbs: breadcrumbs.length,
                  },
                });
              }}
            />
            {isLast ? null : <span>/</span>}
          </React.Fragment>
        );
      })}
    </BreadcrumbsWrapper>
  );
}

const BreadcrumbsWrapper = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  color: var(--breadcrumbs-text-color);
  font-size: var(--breadcrumbs-font-size);
  flex-wrap: wrap;

  > div {
    padding: var(--breadcrumbs-padding);
  }

  > span {
    padding: var(--breadcrumbs-gap);
  }

  @media print {
    display: none;
  }
`;