import assert from 'node:assert/strict';
import { setTimeout } from 'node:timers/promises';
import { getGlobalVariable } from '../../utils/env';
import { appendToFile, replaceInFile, writeMultipleFiles } from '../../utils/fs';
import { silentNg, waitForAnyProcessOutputToMatch } from '../../utils/process';
import { ngServe } from '../../utils/project';

export default async function () {
  const esbuild = getGlobalVariable('argv')['esbuild'];
  const validBundleRegEx = esbuild ? /sent to client/ : /Compiled successfully\./;
  const lazyBundleRegEx = esbuild ? /chunk-/ : /src_app_lazy_lazy_ts\.js/;

  // Disable HMR to support page reload based rebuild testing.
  const port = await ngServe('--no-hmr');

  // Add a lazy route.
  await silentNg('generate', 'component', 'lazy');

  // Should trigger a rebuild with a new bundle.
  // We need to use Promise.all to ensure we are waiting for the rebuild just before we write
  // the file, otherwise rebuilds can be too fast and fail CI.
  // Count the bundles.
  // Verify that a new chunk was created.
  await Promise.all([
    waitForAnyProcessOutputToMatch(lazyBundleRegEx),
    replaceInFile(
      'src/app/app.routes.ts',
      'routes: Routes = [];',
      `routes: Routes = [{path: 'lazy', loadComponent: () => import('./lazy/lazy').then(c => c.Lazy)}];`,
    ),
  ]);

  // Change multiple files and check that all of them are invalidated and recompiled.
  await setTimeout(500);
  await Promise.all([
    waitForAnyProcessOutputToMatch(validBundleRegEx),
    appendToFile(
      'src/app/app.routes.ts',
      `
        console.log('$$_E2E_GOLDEN_VALUE_1');
        export let X = '$$_E2E_GOLDEN_VALUE_2';
      `,
    ),
    appendToFile(
      'src/main.ts',
      `
        import * as m from './app/app.routes';
        console.log(m.X);
        console.log('$$_E2E_GOLDEN_VALUE_3');
        `,
    ),
  ]);

  await setTimeout(500);
  await Promise.all([
    waitForAnyProcessOutputToMatch(validBundleRegEx),
    writeMultipleFiles({
      'src/app/app.routes.ts': `
        import { Routes } from '@angular/router';

        export const routes: Routes = [];

        console.log('$$_E2E_GOLDEN_VALUE_1');
        export let X = '$$_E2E_GOLDEN_VALUE_2';
        console.log('File changed with no import/export changes');
        `,
    }),
  ]);
  {
    const response = await fetch(`http://localhost:${port}/main.js`);
    const body = await response.text();
    assert.match(body, /\$\$_E2E_GOLDEN_VALUE_1/);
    assert.match(body, /\$\$_E2E_GOLDEN_VALUE_2/);
    assert.match(body, /\$\$_E2E_GOLDEN_VALUE_3/);
  }

  await setTimeout(500);
  await Promise.all([
    waitForAnyProcessOutputToMatch(validBundleRegEx),
    writeMultipleFiles({
      'src/app/app.html': '<h1>testingTESTING123</h1>',
    }),
  ]);

  {
    const response = await fetch(`http://localhost:${port}/main.js`);
    const body = await response.text();
    assert.match(body, /testingTESTING123/);
  }

  await setTimeout(500);
  await Promise.all([
    waitForAnyProcessOutputToMatch(validBundleRegEx),
    writeMultipleFiles({
      'src/app/app.css': ':host { color: blue; }',
    }),
  ]);

  {
    const response = await fetch(`http://localhost:${port}/main.js`);
    const body = await response.text();
    assert.match(body, /color:\s?blue/);
  }

  await setTimeout(500);
  await Promise.all([
    waitForAnyProcessOutputToMatch(validBundleRegEx),
    writeMultipleFiles({
      'src/styles.css': 'div { color: green; }',
    }),
  ]);

  {
    const response = await fetch(`http://localhost:${port}/styles.css`);
    const body = await response.text();
    assert.match(body, /color:\s?green/);
  }
}