import express from 'express';
import { dirname, resolve } from 'node:path';
import { getGlobalVariable } from '../../utils/env';
import { appendToFile, copyFile, createDir, replaceInFile, writeFile } from '../../utils/fs';
import { installPackage } from '../../utils/packages';
import { updateJsonFile } from '../../utils/project';
import { readNgVersion } from '../../utils/version';
import { Server } from 'node:http';
import { AddressInfo } from 'node:net';
import type { Page } from 'puppeteer';

// Configurations for each locale.
const translationFile = 'src/locale/messages.xlf';
export const baseDir = 'dist/test-project/browser';
export const langTranslations = [
  {
    lang: 'en-US',
    outputPath: `${baseDir}/en-US`,
    translation: {
      helloPartial: 'Hello',
      hello: 'Hello i18n!',
      plural: 'Updated 3 minutes ago',
      date: 'January',
    },
  },
  {
    lang: 'fr',
    outputPath: `${baseDir}/fr`,
    translation: {
      helloPartial: 'Bonjour',
      hello: 'Bonjour i18n!',
      plural: 'Mis à jour il y a 3 minutes',
      date: 'janvier',
    },
    translationReplacements: [
      ['Hello', 'Bonjour'],
      ['Updated', 'Mis à jour'],
      ['just now', 'juste maintenant'],
      ['one minute ago', 'il y a une minute'],
      [/other {/g, 'other {il y a '],
      ['minutes ago', 'minutes'],
    ],
  },
  {
    lang: 'de',
    outputPath: `${baseDir}/de`,
    translation: {
      helloPartial: 'Hallo',
      hello: 'Hallo i18n!',
      plural: 'Aktualisiert vor 3 Minuten',
      date: 'Januar',
    },
    translationReplacements: [
      ['Hello', 'Hallo'],
      ['Updated', 'Aktualisiert'],
      ['just now', 'gerade jetzt'],
      ['one minute ago', 'vor einer Minute'],
      [/other {/g, 'other {vor '],
      ['minutes ago', 'Minuten'],
    ],
  },
];
export const sourceLocale = langTranslations[0].lang;

export async function browserCheck(page: Page, lang: string) {
  const translation = langTranslations.find((t) => t.lang === lang)?.translation;
  if (!translation) {
    throw new Error(`Could not find translation for language '${lang}'`);
  }

  const getParagraph = async (id: string) => page.$eval(`p#${id}`, (el) => el.textContent?.trim());

  const hello = await getParagraph('hello');
  if (hello !== translation.hello) {
    throw new Error(`Expected 'hello' to be '${translation.hello}', but got '${hello}'.`);
  }

  const locale = await getParagraph('locale');
  if (locale !== lang) {
    throw new Error(`Expected 'locale' to be '${lang}', but got '${locale}'.`);
  }

  const date = await getParagraph('date');
  if (date !== translation.date) {
    throw new Error(`Expected 'date' to be '${translation.date}', but got '${date}'.`);
  }

  const plural = await getParagraph('plural');
  if (plural !== translation.plural) {
    throw new Error(`Expected 'plural' to be '${translation.plural}', but got '${plural}'.`);
  }
}

export interface ExternalServer {
  readonly server: Server;
  readonly port: number;
  readonly url: string;
}

/**
 * Create an `express` `http.Server` listening on a random port.
 *
 * Call .close() on the server return value to close the server.
 */
export async function externalServer(outputPath: string, baseUrl = '/'): Promise<ExternalServer> {
  const app = express();
  app.use(baseUrl, express.static(resolve(outputPath)));

  return new Promise((resolve) => {
    const server = app.listen(0, 'localhost', () => {
      const { port } = server.address() as AddressInfo;

      resolve({
        server,
        port,
        url: `http://localhost:${port}${baseUrl}`,
      });
    });
  });
}

export const baseHrefs: { [l: string]: string } = {
  'en-US': '/en/',
  fr: '/fr-FR/',
  de: '',
};

export async function setupI18nConfig() {
  // Add component with i18n content, both translations and localeData (plural, dates).
  await writeFile(
    'src/app/app.ts',
    `
    import { Component, Inject, LOCALE_ID } from '@angular/core';
    import { DatePipe } from '@angular/common';
    import { RouterOutlet } from '@angular/router';

    @Component({
      selector: 'app-root',
      imports: [DatePipe, RouterOutlet],
      templateUrl: './app.html'
    })
    export class App {
      constructor(@Inject(LOCALE_ID) public locale: string) { }
      title = 'i18n';
      jan = new Date(2000, 0, 1);
      minutes = 3;
    }
  `,
  );
  await writeFile(
    `src/app/app.html`,
    `
    <p id="hello" i18n="An introduction header for this sample">Hello {{ title }}! </p>
    <p id="locale">{{ locale }}</p>
    <p id="date">{{ jan | date : 'LLLL' }}</p>
    <p id="plural" i18n>Updated {minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}</p>
    <router-outlet></router-outlet>
  `,
  );

  await createDir(dirname(translationFile));
  await writeFile(
    translationFile,
    `
    <?xml version="1.0" encoding="UTF-8" ?>
    <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
      <file source-language="en-US" datatype="plaintext" original="ng2.template">
        <body>
          <trans-unit id="4286451273117902052" datatype="html">
            <source>Hello <x id="INTERPOLATION" equiv-text="{{ title }}"/>! </source>
            <context-group purpose="location">
              <context context-type="sourcefile">src/app/app.html</context>
              <context context-type="linenumber">2,3</context>
            </context-group>
            <note priority="1" from="description">An introduction header for this sample</note>
          </trans-unit>
          <trans-unit id="4606963464835766483" datatype="html">
            <source>Updated <x id="ICU" equiv-text="{minutes, plural, =0 {just now} =1 {one minute ago} other {{{minutes}} minutes ago}}" xid="1887283401472369100"/></source>
            <context-group purpose="location">
              <context context-type="sourcefile">src/app/app.html</context>
              <context context-type="linenumber">5,6</context>
            </context-group>
          </trans-unit>
          <trans-unit id="2002272803511843863" datatype="html">
            <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION"/> minutes ago}}</source>
            <context-group purpose="location">
              <context context-type="sourcefile">src/app/app.html</context>
              <context context-type="linenumber">5,6</context>
            </context-group>
          </trans-unit>
        </body>
      </file>
    </xliff>`,
  );

  // Add a dynamic import to ensure syntax is supported
  // ng serve support: https://github.com/angular/angular-cli/issues/16248
  await writeFile('src/app/dynamic.ts', `export const abc = 5;`);
  await appendToFile(
    'src/app/app.ts',
    `
    (async () => { await import('./dynamic'); })();
  `,
  );

  // Update angular.json to build, serve, and test each locale.
  await updateJsonFile('angular.json', (workspaceJson) => {
    const appProject = workspaceJson.projects['test-project'];
    const appArchitect = workspaceJson.projects['test-project'].architect;
    const buildConfigs = appArchitect['build'].configurations;
    const serveConfigs = appArchitect['serve'].configurations;

    appArchitect['build'].defaultConfiguration = undefined;

    // Always error on missing translations.
    appArchitect['build'].options.optimization = true;
    appArchitect['build'].options.aot = true;
    appArchitect['build'].options.i18nMissingTranslation = 'error';
    appArchitect['build'].options.sourceMap = true;
    appArchitect['build'].options.outputHashing = 'none';

    const useWebpackBuilder = !getGlobalVariable('argv')['esbuild'];
    if (useWebpackBuilder) {
      appArchitect['build'].options.buildOptimizer = true;
      appArchitect['build'].options.vendorChunk = true;
    }

    // Enable localization for all locales
    appArchitect['build'].options.localize = true;

    // Add i18n config items (app, build, serve, e2e).
    // tslint:disable-next-line: no-any
    const i18n: Record<string, any> = (appProject.i18n = { locales: {} });
    for (const { lang } of langTranslations) {
      if (lang === sourceLocale) {
        i18n.sourceLocale = lang;
      } else {
        i18n.locales[lang] = `src/locale/messages.${lang}.xlf`;
      }

      buildConfigs[lang] = { localize: [lang] };
      serveConfigs[lang] = { buildTarget: `test-project:build:${lang}` };
    }
  });

  // Install the localize package if using ivy
  let localizeVersion = '@angular/localize@' + readNgVersion();
  if (getGlobalVariable('argv')['ng-snapshots']) {
    localizeVersion = require('../../ng-snapshot/package.json').dependencies['@angular/localize'];
  }

  await installPackage(localizeVersion);

  // Make translations for each language.
  for (const { lang, translationReplacements } of langTranslations) {
    if (lang != sourceLocale) {
      await copyFile(translationFile, `src/locale/messages.${lang}.xlf`);
      for (const replacements of translationReplacements!) {
        await replaceInFile(
          `src/locale/messages.${lang}.xlf`,
          new RegExp(replacements[0], 'g'),
          replacements[1] as string,
        );
      }

      for (const replacement of [[/source/g, 'target']]) {
        await replaceInFile(
          `src/locale/messages.${lang}.xlf`,
          new RegExp(replacement[0], 'g'),
          replacement[1] as string,
        );
      }
    }
  }
}