import * as BABYLONGUI from 'babylonjs-gui';
import { theme, $selectedTheme, guiTexture, canvas } from '../helpers';
import { GUI } from '../constants';
export const createSafeFrame = ratio => {
  const buffer = 0.95;
  const name = GUI.outerSafeFrame;
  const safeFrame = new BABYLONGUI.Rectangle(name);
  safeFrame.cornerRadius = 8;
  safeFrame.thickness = 3;
  safeFrame.alpha = 0.75;
  safeFrame.color = theme.colors[$selectedTheme].accent;
  safeFrame.background = 'transparent';
  safeFrame.onBeforeDrawObservable.add(() => {
    const isWidthGreater = canvas.clientWidth > canvas.clientHeight;
    const canvasWidth = canvas.clientWidth;
    const canvasHeight = canvas.clientHeight;
    const canvasRatio = canvasWidth / canvasHeight;
    let frameWidth = canvas.clientWidth / canvasRatio;
    let frameHeight = canvas.clientHeight / canvasRatio;
    let frameRatio = frameWidth / frameHeight;
    const compensationMultiplier = ratio / frameRatio;
    frameHeight /= compensationMultiplier;
    frameRatio = frameWidth / frameHeight;
    if (!isWidthGreater) {
      frameWidth = canvas.clientWidth;
      frameHeight = canvas.clientWidth / ratio;
    }
    safeFrame.widthInPixels = frameWidth * buffer;
    safeFrame.heightInPixels = frameHeight * buffer;
  });
  guiTexture.addControl(safeFrame);
  guiTexture.getControlByName(name).isVisible = false;
};
export const createDragSelectBox = () => {
  const name = GUI.dragSelectBox;
  const dragBox = new BABYLONGUI.Rectangle(name);
  dragBox.cornerRadius = 5;
  dragBox.thickness = 2;
  dragBox.alpha = 0.75;
  dragBox.color = theme.colors[$selectedTheme].accent;
  dragBox.background = `${theme.colors[$selectedTheme].accent}25`;
  dragBox.horizontalAlignment = BABYLONGUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
  dragBox.verticalAlignment = BABYLONGUI.Control.VERTICAL_ALIGNMENT_TOP;
  guiTexture.addControl(dragBox);
  guiTexture.getControlByName(name).isVisible = false;
};