import { IContainerModel } from '../../Interfaces/IContainerModel';
import { SHOW_SELECTOR_TEXT } from '../../utils/default';
import { GetAbsolutePosition } from '../../utils/itertools';
import { RemoveMargin } from '../../utils/svg';

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

export function RenderSelector(ctx: CanvasRenderingContext2D, frameCount: number, props: ISelectorProps): void {
  if (props.selected === undefined || props.selected === null) {
    return;
  }

  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
  ));

  const xText = x + width / 2;
  const yText = y + height / 2;

  ctx.strokeStyle = '#3B82F6';
  ctx.lineWidth = 4 / scale;
  ctx.globalAlpha = (Math.sin(frameCount * 0.0450) ** 2);
  ctx.strokeRect(x, y, width, height);
  ctx.globalAlpha = 1;
  ctx.lineWidth = 1;
  ctx.strokeStyle = 'black';

  if (SHOW_SELECTOR_TEXT) {
    ctx.font = `${16 / scale}px Verdana`;
    ctx.textAlign = 'center';
    ctx.fillText(props.selected.properties.displayedText, xText, yText);
    ctx.textAlign = 'left';
  }
}