/**
 * @module skottie-sk
 * @description <h2><code>skottie-sk</code></h2>
 *
 * <p>
 *   The main application element for skottie.
 * </p>
 *
 */
import '../skottie-config-sk';
import '../skottie-player-sk';
import '../../../elements-sk/modules/checkbox-sk';
import '../../../elements-sk/modules/collapse-sk';
import '../../../elements-sk/modules/error-toast-sk';
import { html, TemplateResult } from 'lit-html';
import JSONEditor from 'jsoneditor';
import LottiePlayer from 'lottie-web';
import { $$ } from '../../../infra-sk/modules/dom';
import { errorMessage } from '../../../elements-sk/modules/errorMessage';
import { define } from '../../../elements-sk/modules/define';
import { jsonOrThrow } from '../../../infra-sk/modules/jsonOrThrow';
import { stateReflector } from '../../../infra-sk/modules/stateReflector';
import { CollapseSk } from '../../../elements-sk/modules/collapse-sk/collapse-sk';
import { SkottieGifExporterSk } from '../skottie-gif-exporter-sk/skottie-gif-exporter-sk';
import '../skottie-gif-exporter-sk';
import '../skottie-text-editor-sk';
import { replaceTexts } from '../skottie-text-editor-sk/text-replace';
import '../skottie-library-sk';
import { SoundMap, AudioPlayer } from '../audio';
import '../skottie-performance-sk';
import { renderByDomain } from '../helpers/templates';
import { isDomain, supportedDomains } from '../helpers/domains';
import '../skottie-audio-sk';
import { ElementSk } from '../../../infra-sk/modules/ElementSk';
import {
  SkottieConfigEventDetail,
  SkottieConfigState,
} from '../skottie-config-sk/skottie-config-sk';
import { SkottiePlayerSk } from '../skottie-player-sk/skottie-player-sk';
import { SkottiePerformanceSk } from '../skottie-performance-sk/skottie-performance-sk';
import { FontAsset, LottieAnimation, LottieAsset, ViewMode } from '../types';
import { SkottieLibrarySk } from '../skottie-library-sk/skottie-library-sk';
import {
  AudioStartEventDetail,
  SkottieAudioSk,
} from '../skottie-audio-sk/skottie-audio-sk';
import {
  SkottieTextEditorSk,
  TextEditApplyEventDetail,
} from '../skottie-text-editor-sk/skottie-text-editor-sk';
import '../skottie-shader-editor-sk';
import {
  ShaderEditApplyEventDetail,
  ShaderEditorSk,
} from '../skottie-shader-editor-sk/skottie-shader-editor-sk';
import '../../../infra-sk/modules/theme-chooser-sk';
import '../../../infra-sk/modules/app-sk';
import { replaceShaders } from '../skottie-shader-editor-sk/shader-replace';
import '../../../elements-sk/modules/icons/expand-less-icon-sk';
import '../../../elements-sk/modules/icons/expand-more-icon-sk';
import '../../../elements-sk/modules/icons/play-arrow-icon-sk';
import '../../../elements-sk/modules/icons/pause-icon-sk';
import '../../../elements-sk/modules/icons/replay-icon-sk';
import '../../../elements-sk/modules/icons/file-download-icon-sk';
import '../skottie-button-sk';
import '../skottie-dropdown-sk';
import { DropdownSelectEvent } from '../skottie-dropdown-sk/skottie-dropdown-sk';
import '../skottie-exporter-sk';
import {
  ExportType,
  SkottieExporterSk,
} from '../skottie-exporter-sk/skottie-exporter-sk';
import '../skottie-file-settings-sk';
import {
  SkottieFileSettingsSk,
  SkottieFileSettingsEventDetail,
} from '../skottie-file-settings-sk/skottie-file-settings-sk';
import '../skottie-file-form-sk';
import { SkottieFilesEventDetail } from '../skottie-file-form-sk/skottie-file-form-sk';
import '../skottie-background-settings-sk';
import { SkottieBackgroundSettingsEventDetail } from '../skottie-background-settings-sk/skottie-background-settings-sk';

// It is assumed that this symbol is being provided by a version.js file loaded in before this
// file.
declare const SKIA_VERSION: string;

interface BodymovinPlayer {
  goToAndStop(t: number): void;
  goToAndPlay(t: number): void;
  pause(): void;
  play(): void;
}

interface LottieLibrary {
  version: string;
  loadAnimation(opts: Record<string, unknown>): BodymovinPlayer;
}

interface LoadedAsset {
  name: string;
  bytes?: ArrayBuffer;
  player?: AudioPlayer;
}

const GOOGLE_WEB_FONTS_HOST =
  'https://storage.googleapis.com/skia-cdn/google-web-fonts';

const PRODUCTION_ASSETS_PATH = '/_/a';

// Make this the hash of the lottie file you want to play on startup.
const DEFAULT_LOTTIE_FILE = '1112d01d28a776d777cebcd0632da15b'; // gear.json

// SCRUBBER_RANGE is the input range for the scrubbing control.
// This is an arbitrary value, and is treated as a re-scaled duration.
const SCRUBBER_RANGE = 1000;

const AUDIO_SUPPORTED_DOMAINS = [
  supportedDomains.SKOTTIE_INTERNAL,
  supportedDomains.SKOTTIE_TENOR,
  supportedDomains.LOCALHOST,
];

type UIMode = 'dialog' | 'loading' | 'loaded' | 'idle';

const caption = (text: string, mode: ViewMode) => {
  if (mode === 'presentation') {
    return null;
  }
  return html` <figcaption>${text}</figcaption> `;
};

const redir = () =>
  renderByDomain(
    html` <div>
      Googlers should use
      <a href="https://skottie-internal.skia.org">skottie-internal.skia.org</a>.
    </div>`,
    Object.values(supportedDomains).filter(
      (domain: string) => domain !== supportedDomains.SKOTTIE_INTERNAL
    )
  );

const displayLoading = () => html`
  <div class="loading">
    <spinner-sk active></spinner-sk><span>Loading...</span>
  </div>
`;

export class SkottieSk extends ElementSk {
  private static template = (ele: SkottieSk) => html`
    <app-sk>
      <div class="app-container">
        <header>
          <h2>Skottie Web Player</h2>
          <span>
            <a
              href="https://skia.googlesource.com/skia/+show/${SKIA_VERSION}"
              class="header__skia-version"
            >
              ${SKIA_VERSION.slice(0, 7)}
            </a>

            <skottie-dropdown-sk
              id="view-exporter"
              .name="dropdown-exporter"
              .options=${[
                { id: '', value: 'Export' },
                { id: 'gif', value: 'GIF' },
                { id: 'webM', value: 'WebM' },
                { id: 'png', value: 'PNG sequence' },
              ]}
              reset
              @select=${ele.exportSelectHandler}
              border
            >
            </skottie-dropdown-sk>
            <skottie-button-sk
              id="view-perf-chart"
              @select=${ele.togglePerformanceChart}
              type="outline"
              .content=${'Performance chart'}
              .classes=${['header__button']}
            >
            </skottie-button-sk>
            <skottie-button-sk
              id="view-json-layers"
              @select=${ele.toggleEditor}
              type="outline"
              .content=${'View JSON code'}
              .classes=${['header__button']}
            >
            </skottie-button-sk>

            <theme-chooser-sk></theme-chooser-sk>
          </span>
        </header>
        <main>${ele.pick()}</main>
        <footer>
          <error-toast-sk></error-toast-sk>
          ${redir()}
        </footer>
      </div>
      <skottie-exporter-sk @start=${ele.onExportStart}></skottie-exporter-sk>
    </app-sk>
  `;

  // pick the right part of the UI to display based on ele._ui.
  private pick = () => {
    switch (this.ui) {
      default:
      case 'dialog':
        return this.displayDialog();
      case 'idle':
        return this.displayIdle();
      case 'loading':
        return displayLoading();
      case 'loaded':
        return this.displayLoaded();
    }
  };

  private displayDialog = () => html`
    <skottie-config-sk
      .state=${this.state}
      .width=${this.width}
      .height=${this.height}
      .fps=${this.fps}
      .backgroundColor=${this.backgroundColor}
      @skottie-selected=${this.skottieFileSelected}
      @cancelled=${this.selectionCancelled}
    ></skottie-config-sk>
  `;

  private displayIdle = () => html`
    <div class="threecol">
      <div class="left">${this.leftControls()}</div>
      <div class="main"></div>
      <div class="right">${this.rightControls()}</div>
    </div>
  `;

  private displayLoaded = () => html`
    <div class="threecol">
      <div class="left">${this.leftControls()}</div>
      <div class="main">${this.mainContent()}</div>
      <div class="right">${this.rightControls()}</div>
    </div>
  `;

  private mainContent = () => html`
    <div class="players">
      <figure class="players-container">
        ${this.skottiePlayerTemplate()} ${this.lottiePlayerTemplate()}
      </figure>
      ${this.livePreview()}
    </div>
    <div class="playback">
      <div class="playback-content">
        <skottie-button-sk
          id="playpause"
          .content=${html`<play-arrow-icon-sk
              id="playpause-play"
            ></play-arrow-icon-sk>
            <pause-icon-sk id="playpause-pause"></pause-icon-sk>`}
          .classes=${['playback-content__button']}
          @select=${this.playpause}
        ></skottie-button-sk>
        <div class="scrub">
          <input
            id="scrub"
            type="range"
            min="0"
            max=${SCRUBBER_RANGE}
            step="0.1"
            @input=${this.onScrub}
            @change=${this.onScrubEnd}
          />
          <label class="number">
            Frame:
            <input
              type="number"
              id="frameInput"
              class="playback-content-frameInput"
              @focus=${this.onFrameFocus}
              @change=${this.onFrameChange}
            /><!--
            --><span class="playback-content-frameTotal" id="frameTotal"
              >of 0</span
            >
          </label>
        </div>
        <skottie-button-sk
          id="rewind"
          .content=${html`<replay-icon-sk></replay-icon-sk>`}
          .classes=${['playback-content__button']}
          @select=${this.rewind}
        ></skottie-button-sk>
      </div>
    </div>

    <div @click=${this.onChartClick}>${this.performanceChartTemplate()}</div>
    ${this.jsonEditor()} ${this.gifExporter()}

    <collapse-sk id="volume" closed>
      <p>Volume:</p>
      <input
        id="volume-slider"
        type="range"
        min="0"
        max="1"
        step=".05"
        value="1"
        @input=${this.onVolumeChange}
      />
    </collapse-sk>
  `;

  private embedDialog() {
    return html`
      <details class="embed expando">
        <summary id="embed-open">
          <span>Embed</span><expand-less-icon-sk></expand-less-icon-sk>
          <expand-more-icon-sk></expand-more-icon-sk>
        </summary>
        <label>
          Embed using an iframe
          <input value=${this.iframeDirections()} />
        </label>
        <label>
          Embed on skia.org
          <input value=${this.inlineDirections()} />
        </label>
      </details>
    `;
  }

  private performanceChartTemplate() {
    return html`
      <dialog class="perf-chart" ?open=${this.showPerformanceChart}>
        <div class="top-ribbon">
          <span>Performance Chart</span>
          <button @click=${this.togglePerformanceChart}>Close</button>
        </div>
        <skottie-performance-sk id="chart"></skottie-performance-sk>
      </dialog>
    `;
  }

  private leftControls = () => {
    if (this.viewMode === 'presentation') {
      return null;
    }

    return html`
      <div class="json-chooser">
        <div class="title">JSON File</div>
        ${this.renderDownload()}
        <skottie-file-form-sk
          @files-selected=${this.skottieFilesSelected}
        ></skottie-file-form-sk>
      </div>

      ${this.fileSettingsDialog()} ${this.backgroundDialog()}
      ${this.audioDialog()} ${this.optionsDialog()}

      <button
        class="apply-button"
        ?hidden=${!this.hasEdits}
        @click=${this.applyEdits}
      >
        Apply Edits
      </button>
    `;
  };

  private rightControls = () => html`
    ${this.jsonTextEditor()} ${this.library()} ${this.embedDialog()}
  `;

  private renderDownload() {
    if (this.state.lottie) {
      return html`
        <div class="upload-download">
          <button class="large edit-config">
            ${this.state.filename} ${this.width}x${this.height} ...
          </button>
          <div class="download">
            <a
              target="_blank"
              download=${this.state.filename}
              href=${this.downloadURL}
            >
              <file-download-icon-sk></file-download-icon-sk>
            </a>
            ${this.hasEdits ? '(without edits)' : ''}
          </div>
        </div>
      `;
    }
    return null;
  }

  private optionsDialog = () => html`
    <details class="expando">
      <summary id="options-open">
        <span>Options</span><expand-less-icon-sk></expand-less-icon-sk>
        <expand-more-icon-sk></expand-more-icon-sk>
      </summary>
      <div class="options-container">
        <checkbox-sk
          label="Show lottie-web"
          ?checked=${this.showLottie}
          @click=${this.toggleLottie}
        >
        </checkbox-sk>
      </div>
    </details>
  `;

  private audioDialog = () =>
    renderByDomain(
      html`
        <details
          class="expando"
          ?open=${this.showAudio}
          @toggle=${(e: Event) =>
            this.toggleAudio((e.target! as HTMLDetailsElement).open)}
        >
          <summary id="audio-open">
            <span>Audio</span><expand-less-icon-sk></expand-less-icon-sk>
            <expand-more-icon-sk></expand-more-icon-sk>
          </summary>

          <skottie-audio-sk
            .animation=${this.state.lottie}
            @apply=${this.applyAudioSync}
          >
          </skottie-audio-sk>
        </details>
      `,
      AUDIO_SUPPORTED_DOMAINS
    );

  private fileSettingsDialog = () =>
    html`
      <details
        class="expando"
        ?open=${this.showFileSettings}
        @toggle=${(e: Event) =>
          this.toggleFileSettings((e.target! as HTMLDetailsElement).open)}
      >
        <summary id="fileSettings-open">
          <span>File Settings</span><expand-less-icon-sk></expand-less-icon-sk>
          <expand-more-icon-sk></expand-more-icon-sk>
        </summary>
        <skottie-file-settings-sk
          .width=${this.width}
          .height=${this.height}
          .fps=${this.fps}
          @settings-change=${this.skottieFileSettingsUpdated}
        ></skottie-file-settings-sk>
      </details>
    `;

  private backgroundDialog = () =>
    html`
      <details
        class="expando"
        ?open=${this.showBackgroundSettings}
        @toggle=${(e: Event) =>
          this.toggleBackgroundSettings((e.target! as HTMLDetailsElement).open)}
      >
        <summary>
          <span>Background color</span>
          <expand-less-icon-sk></expand-less-icon-sk>
          <expand-more-icon-sk></expand-more-icon-sk>
        </summary>
        <skottie-background-settings-sk
          @background-change=${this.skottieBackgroundUpdated}
        ></skottie-background-settings-sk>
      </details>
    `;

  private iframeDirections = () =>
    `<iframe width="${this.width}" height="${this.height}" src="${window.location.origin}/e/${this.hash}?w=${this.width}&h=${this.height}" scrolling=no>`;

  private inlineDirections = () =>
    `<skottie-inline-sk width="${this.width}" height="${this.height}" src="${window.location.origin}/_/j/${this.hash}"></skottie-inline-sk>`;

  private skottiePlayerTemplate = () => html` <figure
    class="players-container-player"
  >
    <skottie-player-sk paused width=${this.width} height=${this.height}>
    </skottie-player-sk>
    ${this.wasmCaption()}
  </figure>`;

  private lottiePlayerTemplate = () => {
    if (!this.showLottie) {
      return '';
    }
    return html` <figure class="players-container-player">
      <div
        id="container"
        title="lottie-web"
        style="width: 100%; aspect-ratio: ${this.width /
        this.height}; background-color: ${this.backgroundColor}"
      ></div>
      ${caption('lottie-web', this.viewMode)}
    </figure>`;
  };

  private library = () => html` <details
    class="expando"
    ?open=${this.showLibrary}
    @toggle=${(e: Event) =>
      this.toggleLibrary((e.target! as HTMLDetailsElement).open)}
  >
    <summary id="library-open">
      <span>Library</span><expand-less-icon-sk></expand-less-icon-sk>
      <expand-more-icon-sk></expand-more-icon-sk>
    </summary>

    <skottie-library-sk @select=${this.updateAnimation}> </skottie-library-sk>
  </details>`;

  // TODO(kjlubick): Make the live preview use skottie
  private livePreview = () => {
    if (!this.hasEdits || !this.showLottie) {
      return '';
    }
    if (this.hasEdits) {
      return html` <figure>
        <div
          id="live"
          title="live-preview"
          style="width: ${this.width}px; height: ${this.height}px"
        ></div>
        <figcaption>Preview [lottie-web]</figcaption>
      </figure>`;
    }
    return '';
  };

  private jsonEditor = (): TemplateResult => html` <dialog
    class="editor"
    ?open=${this.showJSONEditor}
  >
    <div class="top-ribbon">
      <span>Layer Information</span>
      <button @click=${this.toggleEditor}>Close</button>
    </div>
    <div id="json_editor"></div>
  </dialog>`;

  private gifExporter = () => html`
    <dialog class="export" ?open=${this.showGifExporter}>
      <div class="top-ribbon">
        <span>Export</span>
        <button @click=${this.toggleGifExporter}>Close</button>
      </div>
      <skottie-gif-exporter-sk @start=${this.onExportStart}>
      </skottie-gif-exporter-sk>
    </dialog>
  `;

  private jsonTextEditor = () => html`
    <details
      class="expando"
      ?open=${this.showTextEditor}
      @toggle=${(e: Event) =>
        this.toggleTextEditor((e.target! as HTMLDetailsElement).open)}
    >
      <summary id="edit-text-open">
        <span>Edit Text</span><expand-less-icon-sk></expand-less-icon-sk>
        <expand-more-icon-sk></expand-more-icon-sk>
      </summary>

      <skottie-text-editor-sk
        .animation=${this.state.lottie}
        .mode=${this.viewMode}
        @apply=${this.applyTextEdits}
      >
      </skottie-text-editor-sk>
    </details>
  `;

  private shaderEditor = () => html`
    <details
      class="expando"
      ?open=${this.showShaderEditor}
      @toggle=${(e: Event) =>
        this.toggleShaderEditor((e.target! as HTMLDetailsElement).open)}
    >
      <summary>
        <span>Edit Shader</span><expand-less-icon-sk></expand-less-icon-sk>
        <expand-more-icon-sk></expand-more-icon-sk>
      </summary>

      <skottie-shader-editor-sk
        .animation=${this.state.lottie}
        .mode=${this.viewMode}
        @apply=${this.applyShaderEdits}
      >
      </skottie-shader-editor-sk>
    </details>
  `;

  private buildFileName = () => {
    const fileName =
      this.state.filename || this.state.lottie?.metadata?.filename;
    if (fileName) {
      return html`<div title="${fileName}">${fileName}</div>`;
    }
    return null;
  };

  private wasmCaption = () => {
    if (this.viewMode === 'presentation') {
      return null;
    }
    return html` <figcaption style="max-width: ${this.width}px;">
      <div>skottie-wasm</div>
      ${this.buildFileName()}
    </figcaption>`;
  };

  private assetsPath = PRODUCTION_ASSETS_PATH; // overridable for testing

  // The URL referring to the lottie JSON Blob.
  private backgroundColor: string = 'rgba(0,0,0,0)';

  private downloadURL: string = '';

  private duration: number = 0; // 0 is a sentinel value for "player not loaded yet"

  private editor: JSONEditor | null = null;

  private editorLoaded: boolean = false;

  // used for remembering the time elapsed while the animation is playing.
  private elapsedTime: number = 0;

  private fps: number = 0;

  private hasEdits: boolean = false;

  private hash: string = '';

  private height: number = 0;

  private live: BodymovinPlayer | null = null;

  private lottiePlayer: BodymovinPlayer | null = null;

  private performanceChart: SkottiePerformanceSk | null = null;

  private playing: boolean = true;

  private playingOnStartOfScrub: boolean = false;

  // The wasm animation computes how long it has been since the previous rendered time and
  // uses arithmetic to figure out where to seek (i.e. which frame to draw).
  private previousFrameTime: number = 0;

  private scrubbing: boolean = false;

  private showAudio: boolean = false;

  private showGifExporter: boolean = false;

  private showJSONEditor: boolean = false;

  private showLibrary: boolean = false;

  private showLottie: boolean = false;

  private showPerformanceChart: boolean = false;

  private showTextEditor: boolean = false;

  private showShaderEditor: boolean = false;

  private showFileSettings: boolean = false;

  private showBackgroundSettings: boolean = false;

  private skottieLibrary: SkottieLibrarySk | null = null;

  private skottiePlayer: SkottiePlayerSk | null = null;

  private speed: number = 1; // this is a playback multiplier

  private state: SkottieConfigState;

  private stateChanged: () => void;

  private ui: UIMode = 'idle';

  private viewMode: ViewMode = 'default';

  private width: number = 0;

  constructor() {
    super(SkottieSk.template);

    this.state = {
      filename: '',
      lottie: null,
      assetsZip: '',
      assetsFilename: '',
    };

    this.stateChanged = stateReflector(
      /* getState */ () => ({
        // provide empty values
        l: this.showLottie,
        e: this.showJSONEditor,
        g: this.showGifExporter,
        t: this.showTextEditor,
        s: this.showShaderEditor,
        p: this.showPerformanceChart,
        i: this.showLibrary,
        a: this.showAudio,
        w: this.width,
        h: this.height,
        f: this.fps,
        bg: this.backgroundColor,
        mode: this.viewMode,
        fs: this.showFileSettings,
        b: this.showBackgroundSettings,
      }),
      /* setState */ (newState) => {
        this.showLottie = !!newState.l;
        this.showJSONEditor = !!newState.e;
        this.showGifExporter = !!newState.g;
        this.showTextEditor = !!newState.t;
        this.showShaderEditor = !!newState.s;
        this.showPerformanceChart = !!newState.p;
        this.showLibrary = !!newState.i;
        this.showAudio = !!newState.a;
        this.width = +newState.w;
        this.height = +newState.h;
        this.fps = +newState.f;
        this.showFileSettings = !!newState.fs;
        this.showBackgroundSettings = !!newState.b;
        this.viewMode =
          newState.mode === 'presentation' ? 'presentation' : 'default';
        this.backgroundColor = String(newState.bg);
        this.render();
      }
    );
  }

  connectedCallback(): void {
    super.connectedCallback();
    this.reflectFromURL();
    window.addEventListener('popstate', this.reflectFromURL);
    this.render();

    // Start a continuous animation loop.
    const drawFrame = () => {
      window.requestAnimationFrame(drawFrame);

      // Elsewhere, the _previousFrameTime is set to null to restart
      // the animation. If null, we assume the user hit re-wind
      // and restart both the Skottie animation and the lottie-web one.
      // This avoids the (small) boot-up lag while we wait for the
      // skottie animation to be parsed and loaded.
      if (!this.previousFrameTime && this.playing) {
        this.previousFrameTime = Date.now();
        this.elapsedTime = 0;
      }
      if (this.playing && this.duration > 0) {
        const currentTime = Date.now();
        this.elapsedTime += (currentTime - this.previousFrameTime) * this.speed;
        this.previousFrameTime = currentTime;
        const progress = this.elapsedTime % this.duration;

        // If we want to have synchronized playing, it's best to force
        // all players to draw the same frame rather than letting them play
        // on their own timeline.
        const normalizedProgress = progress / this.duration;
        this.performanceChart?.start(
          progress,
          this.duration,
          this.state.lottie?.fr || 0
        );
        this.skottiePlayer?.seek(normalizedProgress);
        this.performanceChart?.end();
        this.skottieLibrary?.seek(normalizedProgress);

        // lottie player takes the milliseconds from the beginning of the animation.
        this.lottiePlayer?.goToAndStop(progress);
        this.live?.goToAndStop(progress);
        this.updateScrubber();
        this.updateFrameLabel();
      }
    };

    window.requestAnimationFrame(drawFrame);
  }

  disconnectedCallback(): void {
    super.disconnectedCallback();
    window.removeEventListener('popstate', this.reflectFromURL);
  }

  attributeChangedCallback(): void {
    this.render();
  }

  private updateAnimation(e: CustomEvent<LottieAnimation>): void {
    this.state.lottie = e.detail;
    this.state.filename = e.detail.metadata?.filename || this.state.filename;
    this.upload();
  }

  private applyTextEdits(e: CustomEvent<TextEditApplyEventDetail>): void {
    const texts = e.detail.texts;
    this.state.lottie = replaceTexts(texts, this.state.lottie!);
    this.skottieLibrary?.replaceTexts(texts);

    this.upload();
  }

  private applyShaderEdits(e: CustomEvent<ShaderEditApplyEventDetail>): void {
    const shaders = e.detail.shaders;
    this.state.lottie = replaceShaders(shaders, this.state.lottie!);
    // TODO(jmbetancourt): support skottieLibrary
    // this.skottieLibrary?.replaceShaders(shaders);

    this.upload();
  }

  private applyAudioSync(e: CustomEvent<AudioStartEventDetail>): void {
    const detail = e.detail;
    this.speed = detail.speed;
    this.previousFrameTime = Date.now();
    this.elapsedTime = 0;
    if (!this.playing) {
      this.playpause();
    }
  }

  private onExportStart(): void {
    if (this.playing) {
      this.playpause();
    }
  }

  private applyEdits(): void {
    if (!this.editor || !this.editorLoaded || !this.hasEdits) {
      return;
    }
    this.state.lottie = this.editor.get();
    this.upload();
  }

  private autoSize(): boolean {
    let changed = false;
    if (!this.width) {
      this.width = this.state.lottie!.w;
      changed = true;
    }
    if (!this.height) {
      this.height = this.state.lottie!.h;
      changed = true;
    }
    // By default, leave FPS at 0, instead of reading them from the lottie,
    // because that will cause it to render as smoothly as possible,
    // which looks better in most cases. If a user gives a negative value
    // for fps (e.g. -1), then we use either what the lottie tells us or
    // as fast as possible.
    if (this.fps < 0) {
      this.fps = this.state.lottie!.fr || 0;
    }
    return changed;
  }

  private skottieFileSelected(e: CustomEvent<SkottieConfigEventDetail>) {
    this.state = e.detail.state;
    this.width = e.detail.width;
    this.height = e.detail.height;
    this.fps = e.detail.fps;
    this.backgroundColor = e.detail.backgroundColor;
    this.autoSize();
    this.stateChanged();
    if (e.detail.fileChanged) {
      this.upload();
    } else {
      this.ui = 'loaded';
      this.render();
      this.initializePlayer();
      // Re-sync all players
      this.rewind();
    }
  }

  private skottieFileSettingsUpdated(
    e: CustomEvent<SkottieFileSettingsEventDetail>
  ) {
    this.width = e.detail.width;
    this.height = e.detail.height;
    this.fps = e.detail.fps;
    this.stateChanged();
    if (this.state.lottie) {
      this.autoSize();
      this.initializePlayer();
      // Re-sync all players
      this.rewind();
    }
    this.render();
  }

  private skottieFilesSelected(e: CustomEvent<SkottieFilesEventDetail>) {
    const state = e.detail;
    const width = state.lottie?.w || this.width;
    const height = state.lottie?.h || this.height;
    const fileSettings = $$<SkottieFileSettingsSk>('#file-settings', this);
    if (fileSettings) {
      fileSettings.width = width;
      fileSettings.height = height;
    }
    this.width = width;
    this.height = height;
    this.state = state;
    this.upload();
  }

  private skottieBackgroundUpdated(
    e: CustomEvent<SkottieBackgroundSettingsEventDetail>
  ) {
    const background = e.detail;
    this.backgroundColor = background.color;
    this.stateChanged();
    if (this.state.lottie) {
      this.autoSize();
      this.initializePlayer();
      // Re-sync all players
      this.rewind();
    }

    this.render();
  }

  private selectionCancelled() {
    this.ui = 'loaded';
    this.render();
    this.initializePlayer();
  }

  private initializePlayer(): Promise<void> {
    return this.skottiePlayer!.initialize({
      width: this.width,
      height: this.height,
      lottie: this.state.lottie!,
      assets: this.state.assets,
      soundMap: this.state.soundMap,
      fps: this.fps,
    }).then(() => {
      this.performanceChart?.reset();
      this.duration = this.skottiePlayer!.duration();
      // If the user has specified a value for FPS, we want to lock the
      // size of the scrubber so it is as discrete as the frame rate.
      if (this.fps) {
        const scrubber = $$<HTMLInputElement>('#scrub', this);
        if (scrubber) {
          // calculate a scaled version of ms per frame as the step size.
          scrubber.step = String(
            (1000 / this.fps) * (SCRUBBER_RANGE / this.duration)
          );
        }
      }
      const frameTotal = $$<HTMLInputElement>('#frameTotal', this);
      if (frameTotal) {
        if (this.state.lottie!.fr) {
          frameTotal.textContent =
            'of ' +
            String(Math.round(this.duration * (this.state.lottie!.fr / 1000)));
        }
      }
    });
  }

  private loadAssetsAndRender(): Promise<void> {
    const toLoad: Promise<LoadedAsset | null>[] = [];

    const lottie = this.state.lottie!;
    let fonts: FontAsset[] = [];
    let assets: LottieAsset[] = [];
    if (lottie.fonts && lottie.fonts.list) {
      fonts = lottie.fonts.list;
    }
    if (lottie.assets && lottie.assets.length) {
      assets = lottie.assets;
    }

    toLoad.push(...this.loadFonts(fonts));
    toLoad.push(...this.loadAssets(assets));

    return Promise.all(toLoad)
      .then((externalAssets: (LoadedAsset | null)[]) => {
        const loadedAssets: Record<string, ArrayBuffer> = {};
        const sounds = new SoundMap();
        for (const asset of externalAssets) {
          if (asset && asset.bytes) {
            loadedAssets[asset.name] = asset.bytes;
          } else if (asset && asset.player) {
            sounds.setPlayer(asset.name, asset.player);
          }
        }

        // check fonts
        fonts.forEach((font: FontAsset) => {
          if (!loadedAssets[font.fName]) {
            console.error(`Could not load font '${font.fName}'.`);
          }
        });

        this.state.assets = loadedAssets;
        this.state.soundMap = sounds;
        this.render();
        return this.initializePlayer().then(() => {
          // Re-sync all players
          this.rewind();
        });
      })
      .catch(() => {
        this.render();
        return this.initializePlayer().then(() => {
          // Re-sync all players
          this.rewind();
        });
      });
  }

  private loadFonts(fonts: FontAsset[]): Promise<LoadedAsset | null>[] {
    const promises: Promise<LoadedAsset | null>[] = [];
    for (const font of fonts) {
      if (!font.fName) {
        continue;
      }

      const fetchFont = (fontURL: string) => {
        promises.push(
          fetch(fontURL).then((resp: Response) => {
            // fetch does not reject on 404
            if (!resp.ok) {
              return null;
            }
            return resp.arrayBuffer().then((buffer: ArrayBuffer) => ({
              name: font.fName,
              bytes: buffer,
            }));
          })
        );
      };

      // We have a mirror of google web fonts with a flattened directory structure which
      // makes them easier to find. Additionally, we can host the full .ttf
      // font, instead of the .woff2 font which is served by Google due to
      // it's smaller size by being a subset based on what glyphs are rendered.
      // Since we don't know all the glyphs we need up front, it's easiest
      // to just get the full font as a .ttf file.
      fetchFont(`${GOOGLE_WEB_FONTS_HOST}/${font.fName}.ttf`);

      // Also try using uploaded assets.
      // We may end up with two different blobs for the same font name, in which case
      // the user-provided one takes precedence.
      fetchFont(`${this.assetsPath}/${this.hash}/${font.fName}.ttf`);
    }
    return promises;
  }

  private loadAssets(assets: LottieAsset[]): Promise<LoadedAsset | null>[] {
    const promises: Promise<LoadedAsset | null>[] = [];
    for (const asset of assets) {
      if (asset.id.startsWith('audio_')) {
        // Howler handles our audio assets, they don't provide a promise when making a new Howl.
        // We push the audio asset as is and hope that it loads before playback starts.
        const inline =
          asset.p && asset.p.startsWith && asset.p.startsWith('data:');
        if (inline) {
          promises.push(
            Promise.resolve({
              name: asset.id,
              player: new AudioPlayer(asset.p),
            })
          );
        } else {
          promises.push(
            Promise.resolve({
              name: asset.id,
              player: new AudioPlayer(
                `${this.assetsPath}/${this.hash}/${asset.p}`
              ),
            })
          );
        }
      } else {
        // asset.p is the filename, if it's an image.
        // Don't try to load inline/dataURI images.
        const should_load =
          asset.p && asset.p.startsWith && !asset.p.startsWith('data:');
        if (should_load) {
          promises.push(
            fetch(`${this.assetsPath}/${this.hash}/${asset.p}`).then(
              (resp: Response) => {
                // fetch does not reject on 404
                if (!resp.ok) {
                  console.error(
                    `Could not load ${asset.p}: status ${resp.status}`
                  );
                  return null;
                }
                return resp.arrayBuffer().then((buffer) => ({
                  name: asset.p,
                  bytes: buffer,
                }));
              }
            )
          );
        }
      }
    }
    return promises;
  }

  private playpause(): void {
    const audioManager = $$<SkottieAudioSk>('skottie-audio-sk');
    if (this.playing) {
      this.lottiePlayer?.pause();
      this.live?.pause();
      this.state.soundMap?.pause();
      $$<HTMLElement>('#playpause-pause')!.style.display = 'none';
      $$<HTMLElement>('#playpause-play')!.style.display = 'inherit';
      audioManager?.pause();
    } else {
      this.lottiePlayer?.play();
      this.live?.play();
      this.previousFrameTime = Date.now();
      // There is no need call a soundMap.play() function here.
      // Skottie invokes the play by calling seek on the needed audio track.
      $$<HTMLElement>('#playpause-pause')!.style.display = 'inherit';
      $$<HTMLElement>('#playpause-play')!.style.display = 'none';
      audioManager?.resume();
    }
    this.playing = !this.playing;
  }

  private recoverFromError(msg: string): void {
    errorMessage(msg);
    console.error(msg);
    window.history.pushState(null, '', '/');
    // For development we recover to the loaded state to see the animation
    // even if the upload didn't work
    this.ui = isDomain(supportedDomains.LOCALHOST) ? 'loaded' : 'idle';
    this.render();
  }

  private reflectFromURL(): void {
    // Check URL.
    const match = window.location.pathname.match(/\/([a-zA-Z0-9]+)/);
    if (!match) {
      this.hash = DEFAULT_LOTTIE_FILE;
    } else {
      this.hash = match[1];
    }
    this.ui = 'loading';
    this.render();
    // Run this on the next micro-task to allow mocks to be set up if needed.
    setTimeout(() => {
      fetch(`/_/j/${this.hash}`, {
        credentials: 'include',
      })
        .then(jsonOrThrow)
        .then((json) => {
          // remove legacy fields from state, if they are there.
          delete json.width;
          delete json.height;
          delete json.fps;
          this.state = json;

          if (this.autoSize()) {
            this.stateChanged();
          }
          this.ui = 'loaded';
          this.loadAssetsAndRender().then(() => {
            this.dispatchEvent(
              new CustomEvent('initial-animation-loaded', { bubbles: true })
            );
          });
        })
        .catch((msg) => this.recoverFromError(msg));
    });
  }

  private render(): void {
    if (this.downloadURL) {
      URL.revokeObjectURL(this.downloadURL);
    }
    this.downloadURL = URL.createObjectURL(
      new Blob([JSON.stringify(this.state.lottie)])
    );
    super._render();

    this.skottiePlayer = $$<SkottiePlayerSk>('skottie-player-sk', this);
    this.performanceChart = $$<SkottiePerformanceSk>(
      'skottie-performance-sk',
      this
    );
    this.skottieLibrary = $$<SkottieLibrarySk>('skottie-library-sk', this);

    const skottieGifExporter = $$<SkottieGifExporterSk>(
      'skottie-gif-exporter-sk',
      this
    );
    if (skottieGifExporter && this.skottiePlayer) {
      skottieGifExporter.player = this.skottiePlayer;
    }

    if (this.ui === 'loaded') {
      if (this.state.soundMap && this.state.soundMap.map.size > 0) {
        this.hideVolumeSlider(false);
        // Stop any audio assets that start playing on frame 0
        // Pause the playback to force a user gesture to resume the AudioContext
        if (this.playing) {
          this.playpause();
          this.rewind();
        }
        this.state.soundMap.stop();
      } else {
        this.hideVolumeSlider(true);
      }
      try {
        this.renderLottieWeb();
        this.renderJSONEditor();
        this.renderTextEditor();
        this.renderShaderEditor();
        this.renderAudioManager();
      } catch (e) {
        console.warn('caught error while rendering third party code', e);
      }
    }
  }

  private renderAudioManager(): void {
    if (this.showAudio) {
      const audioManager = $$<SkottieAudioSk>('skottie-audio-sk', this);
      if (audioManager) {
        audioManager.animation = this.state.lottie!;
      }
    }
  }

  private renderTextEditor(): void {
    if (this.showTextEditor) {
      const textEditor = $$<SkottieTextEditorSk>(
        'skottie-text-editor-sk',
        this
      );
      if (textEditor) {
        textEditor.animation = this.state.lottie!;
      }
    }
  }

  private renderShaderEditor(): void {
    if (this.showShaderEditor) {
      const shaderEditor = $$<ShaderEditorSk>('skottie-shader-editor-sk', this);
      if (shaderEditor) {
        shaderEditor.animation = this.state.lottie!;
      }
    }
  }

  private renderJSONEditor(): void {
    if (!this.showJSONEditor) {
      this.editorLoaded = false;
      this.editor = null;
      return;
    }
    const editorContainer = $$<HTMLDivElement>('#json_editor')!;
    // See https://github.com/josdejong/jsoneditor/blob/master/docs/api.md
    // for documentation on this editor.
    const editorOptions = {
      // Use original key order (this preserves related fields locality).
      sortObjectKeys: false,
      // There are sometimes a few onChange events that happen
      // during the initial .set(), so we have a safety variable
      // _editorLoaded to prevent a bunch of recursion
      onChange: () => {
        if (!this.editorLoaded) {
          return;
        }
        this.hasEdits = true;
        this.render();
      },
    };

    if (!this.editor) {
      this.editorLoaded = false;
      editorContainer.innerHTML = '';
      this.editor = new JSONEditor(editorContainer, editorOptions);
    }
    if (!this.hasEdits) {
      this.editorLoaded = false;
      // Only set the JSON when it is loaded, either because it's
      // the first time we got it from the server or because the user
      // hit applyEdits.
      this.editor.set(this.state.lottie);
    }
    // We are now pretty confident that the onChange events will only be
    // when the user modifies the JSON.
    this.editorLoaded = true;
  }

  private renderLottieWeb(): void {
    if (!this.showLottie) {
      return;
    }
    // Don't re-start the animation while the user edits.
    if (!this.hasEdits) {
      $$<HTMLDivElement>('#container')!.innerHTML = '';
      this.lottiePlayer = LottiePlayer.loadAnimation({
        container: $$('#container')!,
        renderer: 'svg',
        loop: true,
        autoplay: this.playing,
        assetsPath: `${this.assetsPath}/${this.hash}/`,
        // Apparently the lottie player modifies the data as it runs?
        animationData: JSON.parse(
          JSON.stringify(this.state.lottie)
        ) as LottieAnimation,
        rendererSettings: {
          preserveAspectRatio: 'xMidYMid meet',
        },
      });
      this.live = null;
    } else {
      // we have edits, update the live preview version.
      // It will re-start from the very beginning, but the user can
      // hit "rewind" to re-sync them.
      $$<HTMLDivElement>('#live')!.innerHTML = '';
      this.live = LottiePlayer.loadAnimation({
        container: $$('#live')!,
        renderer: 'svg',
        loop: true,
        autoplay: this.playing,
        assetsPath: `${this.assetsPath}/${this.hash}/`,
        // Apparently the lottie player modifies the data as it runs?
        animationData: JSON.parse(
          JSON.stringify(this.editor!.get())
        ) as LottieAnimation,
        rendererSettings: {
          preserveAspectRatio: 'xMidYMid meet',
        },
      });
    }
  }

  // This fires every time the user moves the scrub slider.
  private onScrub(e: Event): void {
    if (!this.scrubbing) {
      // Pause the animation while dragging the slider.
      this.playingOnStartOfScrub = this.playing;
      if (this.playing) {
        this.playpause();
      }
      this.scrubbing = true;
    }
    const scrubber = (e.target as HTMLInputElement)!;
    const seek = +scrubber.value / SCRUBBER_RANGE;
    this.seek(seek);
    this.updateFrameLabel();
  }

  // This fires when the user releases the scrub slider.
  private onScrubEnd(): void {
    if (this.playingOnStartOfScrub) {
      this.playpause();
    }
    this.scrubbing = false;
  }

  private onFrameFocus(): void {
    if (this.playing) {
      this.playpause();
    }
  }

  private onFrameChange(e: Event): void {
    if (this.playing) {
      this.playpause();
    }
    const frameInput = $$<HTMLInputElement>('#frameInput', this);
    if (frameInput) {
      const frame = +frameInput.value;
      this.seekFrame(frame);
    }
  }

  private onChartClick(e: Event): void {
    const chart = $$<SkottiePerformanceSk>('#chart', this);
    const frame: number | undefined = chart?.getClickedFrame(e);
    if (frame !== undefined && frame !== -1) {
      if (this.playing) {
        this.playpause();
      }
      const frameInput = $$<HTMLInputElement>('#frameInput', this);
      if (frameInput) frameInput.value = String(frame);
      this.seekFrame(frame);
    }
  }

  private seekFrame(frame: number): void {
    if (frame > 0 && frame < this.duration) {
      let seek = 0;
      if (this.state.lottie?.fr) {
        seek = ((frame / this.state.lottie.fr) * 1000) / this.duration;
      }
      this.seek(seek);
      this.updateScrubber();
    }
  }

  private updateScrubber(): void {
    const scrubber = $$<HTMLInputElement>('#scrub', this);
    if (scrubber) {
      // Scale from time to the arbitrary scrubber range.
      const progress = this.elapsedTime % this.duration;
      scrubber.value = String((SCRUBBER_RANGE * progress) / this.duration);
    }
  }

  private updateFrameLabel(): void {
    const frameLabel = $$<HTMLInputElement>('#frameInput', this);
    if (frameLabel) {
      const progress = this.elapsedTime % this.duration;
      if (this.state.lottie!.fr) {
        frameLabel.value = String(
          Math.round(progress * (this.state.lottie!.fr / 1000))
        );
      }
    }
  }

  private seek(t: number): void {
    // catch case where t = 1
    t = Math.min(t, 0.9999);
    this.elapsedTime = t * this.duration;
    this.live?.goToAndStop(t);
    this.lottiePlayer?.goToAndStop(t * this.duration);
    this.skottiePlayer?.seek(t);
    this.skottieLibrary?.seek(t);
  }

  private onVolumeChange(e: Event): void {
    const scrubber = (e.target as HTMLInputElement)!;
    this.state.soundMap?.setVolume(+scrubber.value);
  }

  private rewind(): void {
    // Handle rewinding when paused.
    if (!this.playing) {
      this.skottiePlayer!.seek(0);
      this.skottieLibrary?.seek(0);
      this.previousFrameTime = 0;
      this.live?.goToAndStop(0);
      this.lottiePlayer?.goToAndStop(0);
      const scrubber = $$<HTMLInputElement>('#scrub', this);
      if (scrubber) {
        scrubber.value = '0';
      }
    } else {
      this.live?.goToAndPlay(0);
      this.lottiePlayer?.goToAndPlay(0);
      this.previousFrameTime = 0;
      const audioManager = $$<SkottieAudioSk>('skottie-audio-sk', this);
      audioManager?.rewind();
    }
  }

  private startEdit(): void {
    this.ui = 'dialog';
    this.render();
  }

  private toggleEditor(e: Event): void {
    // avoid double toggles
    e.preventDefault();
    this.showTextEditor = false;
    this.showJSONEditor = !this.showJSONEditor;
    this.stateChanged();
    this.render();
  }

  private toggleGifExporter(e: Event): void {
    // avoid double toggles
    e.preventDefault();
    this.showGifExporter = !this.showGifExporter;
    this.stateChanged();
    this.render();
  }

  private exportSelectHandler(e: CustomEvent<DropdownSelectEvent>): void {
    if (!this.skottiePlayer) {
      return;
    }
    const exportManager = $$<SkottieExporterSk>('skottie-exporter-sk');
    exportManager?.export(e.detail.value as ExportType, this.skottiePlayer);
  }

  private togglePerformanceChart(e: Event): void {
    // avoid double toggles
    e.preventDefault();
    this.showPerformanceChart = !this.showPerformanceChart;
    this.stateChanged();
    this.render();
  }

  private toggleTextEditor(open: boolean): void {
    this.showJSONEditor = false;
    this.showTextEditor = open;
    this.stateChanged();
    this.render();
  }

  private toggleShaderEditor(open: boolean): void {
    this.showJSONEditor = false;
    this.showShaderEditor = open;
    this.stateChanged();
    this.render();
  }

  private toggleLibrary(open: boolean): void {
    this.showLibrary = open;
    this.stateChanged();
    this.render();
  }

  private toggleAudio(open: boolean): void {
    this.showAudio = open;
    this.stateChanged();
    this.render();
  }

  private toggleFileSettings(open: boolean): void {
    this.showFileSettings = open;
    this.stateChanged();
    this.render();
  }

  private toggleBackgroundSettings(open: boolean): void {
    this.showBackgroundSettings = open;
    this.stateChanged();
    this.render();
  }

  private toggleLottie(e: Event): void {
    // avoid double toggles
    e.preventDefault();
    this.showLottie = !this.showLottie;
    this.stateChanged();
    this.render();
  }

  private hideVolumeSlider(v: boolean) {
    const collapse = $$<CollapseSk>('#volume', this);
    if (collapse) {
      collapse.closed = v;
    }
  }

  private upload(): void {
    // POST the JSON to /_/upload
    this.hash = '';
    this.hasEdits = false;
    this.editorLoaded = false;
    this.editor = null;
    // Clean up the old animation and other wasm objects
    this.render();
    fetch('/_/upload', {
      credentials: 'include',
      body: JSON.stringify(this.state),
      headers: {
        'Content-Type': 'application/json',
      },
      method: 'POST',
    })
      .then(jsonOrThrow)
      .then((json) => {
        // Should return with the hash and the lottie file
        this.ui = 'loaded';
        this.hash = json.hash;
        this.state.lottie = json.lottie;
        window.history.pushState(null, '', `/${this.hash}`);
        this.stateChanged();
        if (this.state.assetsZip) {
          this.loadAssetsAndRender();
        }
        this.render();
      })
      .catch((msg) => this.recoverFromError(msg));

    if (!this.state.assetsZip) {
      this.ui = 'loaded';
      // Start drawing right away, no need to wait for
      // the JSON to make a round-trip to the server, since there
      // are no assets that we need to unzip server-side.
      // We still need to check for things like webfonts.
      this.render();
      this.loadAssetsAndRender();
    } else {
      // We have to wait for the server to process the zip file.
      this.ui = 'loading';
      this.render();
    }
  }

  overrideAssetsPathForTesting(p: string): void {
    this.assetsPath = p;
  }
}

define('skottie-sk', SkottieSk);