import { glMatrix } from 'gl-matrix';
import { compile } from 'sdf-2d';
import '../static/logo-white.svg';
import '../static/no-change/404.html';
import '../static/no-change/favicons/apple-touch-icon.png';
import '../static/no-change/favicons/favicon-16x16.png';
import '../static/no-change/favicons/favicon-32x32.png';
import '../static/no-change/favicons/favicon.ico';
import '../static/no-change/og-image.png';
import '../static/no-change/robots.txt';
import { initAnalytics } from './analytics';
import { extractInsights } from './helper/extract-insights';
import { handleFullScreen } from './helper/handle-full-screen';
import { handleInsights } from './helper/handle-insights';
import { Random } from './helper/random';
import { removeUnnecessaryOutlines } from './helper/remove-unnecessary-outlines';
import { BlobScene } from './scenes/blob/blob-scene';
import { MetaballScene } from './scenes/metaball/metaball-scene';
import { OrbitScene } from './scenes/orbit/orbit-scene';
import { RainScene } from './scenes/rain/rain-scene';
import { TunnelScene } from './scenes/tunnel-scene';
import './styles/index.scss';

const scenes = [TunnelScene, MetaballScene, RainScene, BlobScene, OrbitScene];
Random.seed = 2;

glMatrix.setMatrixArrayType(Array);
removeUnnecessaryOutlines();
initAnalytics();

const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const logo = document.querySelector('#info') as HTMLElement;
const canvasContainer = document.querySelector('#canvas-container') as HTMLCanvasElement;
const errorText = document.querySelector('#error-text') as HTMLParagraphElement;
const errorsContainer = document.querySelector('#errors-container') as HTMLDivElement;
const toggleButton = document.querySelector('#toggle-text') as HTMLElement;
const minimizeButton = document.querySelector('#minimize') as HTMLElement;
const maximizeButton = document.querySelector('#maximize') as HTMLElement;
const overlay = document.querySelector('#overlay') as HTMLDivElement;

let textVisible = true;
const handleTextToggle = () => {
  textVisible = !textVisible;
  overlay.style.visibility = textVisible ? 'visible' : 'hidden';
  toggleButton.innerHTML = textVisible ? 'Hide insights' : 'Show insights';
  if (textVisible) {
    toggleButton.classList.remove('off');
  } else {
    toggleButton.classList.add('off');
  }
};

const isInsidePortfolio =
  new URLSearchParams(location.search).get('portfolioView') !== null;
if (!isInsidePortfolio) {
  toggleButton.style.visibility = 'visible';
  logo.style.visibility = 'visible';
  toggleButton.addEventListener('click', handleTextToggle);
}
handleTextToggle();

const startInsightsSession = async (): Promise<(data: any) => unknown> => {
  const dummyRenderer = await compile(document.createElement('canvas'), []);
  const { vendor, renderer, version } = extractInsights(dummyRenderer.insights);
  dummyRenderer.destroy();

  return await handleInsights({
    vendor,
    renderer,
    referrer: document.referrer,
    connection: (navigator as any)?.connection?.effectiveType,
    devicePixelRatio: devicePixelRatio,
    height: innerHeight,
    width: innerWidth,
    version,
  });
};

const main = async () => {
  const sendFramePromise = startInsightsSession();
  handleFullScreen(minimizeButton, maximizeButton, canvasContainer);

  try {
    let i = 0;
    for (;;) {
      const currentScene = new scenes[i++ % scenes.length]();
      await currentScene.run(canvas, overlay);

      const { fps, renderScale, lightScale } = extractInsights(currentScene.insights);
      (await sendFramePromise)({
        fps,
        renderScale,
        lightScale,
      });
    }
  } catch (e) {
    console.error(e);
    errorText.innerText = e;
    errorsContainer.style.visibility = 'visible';
  }
};

main();