import '../Selector.scss';
import * as React from 'react';
import { type IContainerModel } from '../../../../Interfaces/IContainerModel';
import { GetAbsolutePosition } from '../../../../utils/itertools';
import { RemoveMargin } from '../../../../utils/svg';
import { Selector } from '../Selector/Selector';

interface ISelectorContainerProps {
  containers: Map<string, IContainerModel>
  selected?: IContainerModel
  scale?: number
}

export function SelectorContainer(props: ISelectorContainerProps): JSX.Element {
  if (props.selected === undefined || props.selected === null) {
    return (
      <rect visibility={'hidden'}>
      </rect>
    );
  }

  const scale = (props.scale ?? 1);
  let [x, y] = GetAbsolutePosition(props.containers, props.selected);
  let [width, height] = [
    props.selected.properties.width,
    props.selected.properties.height
  ];

  ({ x, y, width, height } = RemoveMargin(x, y, width, height,
    props.selected.properties.margin.left,
    props.selected.properties.margin.bottom,
    props.selected.properties.margin.top,
    props.selected.properties.margin.right
  ));

  return (
    <Selector
      text={props.selected.properties.displayedText}
      x={x}
      y={y}
      width={width}
      height={height}
      scale={scale}
    />
  );
}