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

interface IDimensionLayerProps {
  containers: Map<string, IContainerModel>
  roots: ContainerModel | ContainerModel[] | null
  scale?: number
}

function GetDimensionsNodes(
  containers: Map<string, IContainerModel>,
  root: ContainerModel,
  scale: number
): React.ReactNode[] {
  const it = MakeBFSIterator(root, containers);
  const dimensions: React.ReactNode[] = [];
  let currentDepth = 0;
  let min = Infinity;
  let max = -Infinity;
  let lastY = 0;
  for (const { container, depth } of it) {
    if (currentDepth !== depth) {
      AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);

      currentDepth = depth;
      min = Infinity;
      max = -Infinity;
    }

    const absoluteX = GetAbsolutePosition(containers, container)[0];
    const x = TransformX(absoluteX, container.properties.width, container.properties.positionReference);
    lastY = container.properties.y + container.properties.height;
    if (x < min) {
      min = x;
    }

    if (x > max) {
      max = x;
    }
  }

  AddNewDimension(currentDepth, min, max, lastY, scale, dimensions);

  return dimensions;
}

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

function AddNewDimension(currentDepth: number, min: number, max: number, lastY: number, scale: number, dimensions: React.ReactNode[]): void {
  const id = `dim-depth-${currentDepth}`;
  const xStart = min;
  const xEnd = max;
  const y = lastY + (DIMENSION_MARGIN * (currentDepth + 1)) / scale;
  const strokeWidth = 1;
  const width = xEnd - xStart;
  const text = width
    .toFixed(0)
    .toString();

  if (width === 0) {
    return;
  }

  dimensions.push(
    <Dimension
      key={id}
      id={id}
      xStart={xStart}
      yStart={y}
      xEnd={xEnd}
      yEnd={y}
      strokeWidth={strokeWidth}
      text={text}
      scale={scale}
    />
  );
}