import {
  AnimationInformationPayload,
  DemosPayload,
  LanguageInformationPayload,
  VariantInformationPayload,
  ViewerStatus,
  ViewerAPIMessage,
  ViewerAPIMessageSource,
  Message,
} from './types';
import { Visao } from './visao';
import { Demo } from './demo';

const VIEWER_ID = 'viewer';
const LANGUAGE = 'en';
const LANGUAGES = ['en', 'fr'];
const VARIANT = 'green';
const VARIANTS = ['green', 'blue'];
const ANIMATION = 'walk';
const ANIMATIONS = ['walk', 'run'];
const DEMOS = [
  new Demo({
    id: 'demo id',
    name: 'demo name',
  }),
];

const LOADED_STATUS_MESSAGE = {
  source: ViewerAPIMessageSource.VIEWER,
  type: ViewerAPIMessage.SEND_STATUS,
  payload: {
    status: ViewerStatus.LOADED,
  },
};

const LANGUAGE_INFORMATION_MESSAGE = {
  source: ViewerAPIMessageSource.VIEWER,
  type: ViewerAPIMessage.SEND_LANGUAGE_INFO,
  payload: {
    language: LANGUAGE,
    languages: LANGUAGES,
  },
};

const VARIANT_INFORMATION_MESSAGE = {
  source: ViewerAPIMessageSource.VIEWER,
  type: ViewerAPIMessage.SEND_VARIANT_INFO,
  payload: {
    modelVariant: VARIANT,
    modelVariants: VARIANTS,
  },
};

const ANIMATION_INFORMATION_MESSAGE = {
  source: ViewerAPIMessageSource.VIEWER,
  type: ViewerAPIMessage.SEND_ANIMATION_INFO,
  payload: {
    animation: ANIMATION,
    animations: ANIMATIONS,
  },
};

const DEMOS_MESSAGE = {
  source: ViewerAPIMessageSource.VIEWER,
  type: ViewerAPIMessage.SEND_DEMOS,
  payload: {
    demos: DEMOS,
  },
};

describe('testing message reception', () => {
  let viewer: Visao;

  beforeAll(() => {
    document.body.innerHTML = `<div><iframe id="${VIEWER_ID}"></iframe></div>`;
  });

  beforeEach(() => {
    viewer = new Visao(VIEWER_ID);
    viewer.setViewerElement(
      document.getElementById(VIEWER_ID) as HTMLIFrameElement
    );
  });

  describe('when listening to viewer status', () => {
    it('should return new statuses on changes via callback', async () => {
      const statusPromise = new Promise<ViewerStatus>((resolve) => {
        viewer.listenToViewerStatus(resolve);
      });

      receiveMessageFromExternalAPI(LOADED_STATUS_MESSAGE);

      const status = await statusPromise;
      expect(status).toBe(LOADED_STATUS_MESSAGE.payload.status);
    });
  });

  describe('when listening for language information changes', () => {
    beforeEach(async () => {
      await waitForViewerToBeLoaded();
    });

    it('should return the new language information via callback', async () => {
      const languageInformationPromise =
        new Promise<LanguageInformationPayload>((resolve) => {
          viewer.getLanguageInformation(resolve);
        });

      receiveMessageFromExternalAPI(LANGUAGE_INFORMATION_MESSAGE);

      const languageInformation = await languageInformationPromise;
      expect(languageInformation.language).toBe(LANGUAGE);
      expect(languageInformation.languages).toEqual(LANGUAGES);
    });
  });

  describe('when listening for variant information changes', () => {
    beforeEach(async () => {
      await waitForViewerToBeLoaded();
    });

    it('should return the variant information via callback', async () => {
      const variantInformationPromise = new Promise<VariantInformationPayload>(
        (resolve) => {
          viewer.getVariantInformation(resolve);
        }
      );

      receiveMessageFromExternalAPI(VARIANT_INFORMATION_MESSAGE);

      const variantInformation = await variantInformationPromise;
      expect(variantInformation.modelVariant).toBe(VARIANT);
      expect(variantInformation.modelVariants).toEqual(VARIANTS);
    });
  });

  describe('when listening for animation information changes', () => {
    beforeEach(async () => {
      await waitForViewerToBeLoaded();
    });

    it('should return the animation information via callback', async () => {
      const animationInformationPromise =
        new Promise<AnimationInformationPayload>((resolve) => {
          viewer.getAnimationInformation(resolve);
        });

      receiveMessageFromExternalAPI(ANIMATION_INFORMATION_MESSAGE);

      const animationInformation = await animationInformationPromise;
      expect(animationInformation.animation).toBe(ANIMATION);
      expect(animationInformation.animations).toEqual(ANIMATIONS);
    });
  });

  describe('when listening for demos', () => {
    beforeEach(async () => {
      await waitForViewerToBeLoaded();
    });

    it('should return the demos via callback', async () => {
      const demosPromise = new Promise<DemosPayload>((resolve) => {
        viewer.getDemos(resolve);
      });

      receiveMessageFromExternalAPI(DEMOS_MESSAGE);

      const demosPayload = await demosPromise;
      expect(demosPayload.demos).toEqual(DEMOS);
    });
  });

  function receiveMessageFromExternalAPI(message: Message) {
    window.postMessage(JSON.stringify(message), '*');
  }

  async function waitForViewerToBeLoaded() {
    const statusPromise = new Promise<void>((resolve) => {
      viewer.listenToViewerStatus(() => resolve());
    });

    receiveMessageFromExternalAPI(LOADED_STATUS_MESSAGE);

    await statusPromise;
  }
});