import * as React from 'react';
import { ContainerModel } from '../../../Interfaces/IContainerModel';
import { DIMENSION_MARGIN } from '../../../utils/default';
import { GetAbsolutePosition, MakeBFSIterator } from '../../../utils/itertools';
import { Dimension } from './Dimension';

interface IDimensionLayerProps {
  roots: ContainerModel | ContainerModel[] | null
}

function GetDimensionsNodes(root: ContainerModel): React.ReactNode[] {
  const it = MakeBFSIterator(root);
  const dimensions: React.ReactNode[] = [];
  for (const { container, depth } of it) {
    const width = container.properties.width;
    const id = `dim-${container.properties.id}`;
    const xStart = GetAbsolutePosition(container)[0];
    const xEnd = xStart + width;
    const y = (container.properties.y + container.properties.height) + (DIMENSION_MARGIN * (depth + 1));
    const strokeWidth = 1;
    const text = width
      .toFixed(0)
      .toString();
    dimensions.push(
      <Dimension
        key={id}
        id={id}
        xStart={xStart}
        yStart={y}
        xEnd={xEnd}
        yEnd={y}
        strokeWidth={strokeWidth}
        text={text} />
    );
  }
  return dimensions;
}

/**
 * A layer containing all dimension
 * @param props
 * @returns
 */
export function DimensionLayer(props: IDimensionLayerProps): JSX.Element {
  let dimensions: React.ReactNode[] = [];
  if (Array.isArray(props.roots)) {
    props.roots.forEach(child => {
      dimensions.concat(GetDimensionsNodes(child));
    });
  } else if (props.roots !== null) {
    dimensions = GetDimensionsNodes(props.roots);
  }
  return (
    <g>
      {dimensions}
    </g>
  );
}
