import HotPocketExtension from '../common';

import POPUP from './templates/popup.html';
import POPUP_CONTENT_SUCCESS from './templates/popup_content_success.html';
import POPUP_CONTENT_ERROR from './templates/popup_content_error.html';

class Popup {
  constructor () {
    this.container = null;
    this.timeout = null;
  }
  setCloseTimeout = () => {
    this.timeout = window.setTimeout(this.close, 5000);
  };
  clearCloseTimeout = () => {
    if (this.timeout !== null) {
      window.clearTimeout(this.timeout);
      this.timeout = null;
    }
  };
  close = () => {
    this.clearCloseTimeout();

    if (this.container !== null) {
      this.container.remove();
      this.container = null;
    }
  };
  show = (content) => {
    this.close();

    this.container = document.createElement('div');
    this.container.id = 'hotpocket-extension-popup';
    this.container.hotPocketExtensionPopup = this;

    const shadow = this.container.attachShadow({mode: 'open'});
    shadow.innerHTML = POPUP;

    const body = shadow.querySelector('.hotpocket-extension-popup-body');
    body.innerHTML = content;

    const i18nElements = shadow.querySelectorAll('[data-message]');
    for (let i18nElement of i18nElements) {
      i18nElement.innerHTML = HotPocketExtension.api.i18n.getMessage(
        i18nElement.dataset.message,
      );
    }

    const closeElements = shadow.querySelectorAll('.hotpocket-extension-popup-close');
    for (const closeElement of closeElements) {
      closeElement.addEventListener('click', this.onCloseClick);
    }

    document.body.appendChild(this.container);
  };
  onCloseClick = (event) => {
    this.close();
  };
}

let currentPopup = null;

const doHandleSaveMessage = (message) => {
  if (currentPopup !== null) {
    currentPopup.close();
  }

  currentPopup = new Popup();
  currentPopup.show(
    (message.result === true) ? POPUP_CONTENT_SUCCESS : POPUP_CONTENT_ERROR,
  );
};

const doSendMessage = (message) => {
  HotPocketExtension.api.runtime.sendMessage(message).
    then((result) => {
      HotPocketExtension.LOGGER.debug(
        'HotPocketExtension.content.doSendMessage(): message sent', message, result,
      );
    }).
    catch((error) => {
      HotPocketExtension.LOGGER.error(
        'HotPocketExtension.content.doSendMessage(): could not send message', error,
      );
    });
};

export default ({...configuration}) => {
  HotPocketExtension.configure(configuration);

  HotPocketExtension.api.runtime.onMessage.addListener((message, sender, sendResponse) => {
    HotPocketExtension.LOGGER.debug('HotPocketExtension.content.onMessage()', message, sender, sendResponse);

    let response = {ok: true};
    try {
      if (message.type === 'HotPocket:Extension:save') {
        doHandleSaveMessage(message);
      }
    } catch (exception) {
      HotPocketExtension.LOGGER.error(
        'HotPocketExtension.content.onMessage(): Unhandled exception when handling service worker message',
        message,
        exception,
      );
      response.ok = false;
    }

    sendResponse(response);

    return true;
  });

  doSendMessage({
    type: 'HotPocket:Extension:ping',
  });

  HotPocketExtension.LOGGER.info(`HotPocket v${HotPocketExtension.version} by BTHLabs`);
};
