import type { ThinEngine } from '@babylonjs/core/Engines/thinEngine';
import type { Effect } from '@babylonjs/core/Materials/effect';

import { CompositingStep } from '../CompositingStep';
import { FrameStep } from './FrameStep';

jest.mock('@babylonjs/core/Engines/thinEngine');
jest.mock('@babylonjs/core/Materials/effect');

describe('FrameStep', () => {
  let canvas: HTMLCanvasElement,
    engine: ThinEngine,
    compositingStep: CompositingStep,
    effect: Effect,
    frameStep: FrameStep;

  const blankPNG =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzQ5MTNEODNDRTgxMTFFQTg0MzZEQTVDRTIwODNDMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzQ5MTNEODRDRTgxMTFFQTg0MzZEQTVDRTIwODNDMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NDkxM0Q4MUNFODExMUVBODQzNkRBNUNFMjA4M0MyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NDkxM0Q4MkNFODExMUVBODQzNkRBNUNFMjA4M0MyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpYHF7wAAAAXSURBVHjaYvz//z8DMmBiQAOEBQACDADGjgMF9n2kTgAAAABJRU5ErkJggg==';
  const redPNG =
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAABNJREFUGFdj/M/A8J8BCTCSLgAAP70H/f9nx4kAAAAASUVORK5CYII=';

  beforeEach(() => {
    canvas = document.createElement('canvas');
    engine = new ThinEngine(canvas, false, {
      premultipliedAlpha: false,
      stencil: false,
      disableWebGL2Support: false,
    });
    compositingStep = new CompositingStep();
    compositingStep.setup({
      engine,
      frameURL: blankPNG,
      boardURL: blankPNG,
      backdropURL: blankPNG,
      gradientURL: blankPNG,
      lutURL: blankPNG,
      blankURL: blankPNG,
    });
    effect = compositingStep.effect as unknown as Effect;
    frameStep = new FrameStep();
  });

  it('sets up correctly', async () => {
    await frameStep.setup(engine, effect, redPNG, false);
    expect(frameStep.isReady).toBe(true);
  });

  it('allows use of animated frames', async () => {
    expect(false).toBe(true);
  });

  it('disposes everything correctly', () => {
    expect(false).toBe(true);
  });
});