/* eslint-disable no-unsanitized/property */
/* globals seConfirm */
/**
 * @file ext-imagelib.js
 *
 * @license MIT
 *
 * @copyright 2010 Alexis Deveria
 *
 */

const name = "imagelib";

const loadExtensionTranslation = async function (svgEditor) {
  let translationModule;
  const lang = svgEditor.configObj.pref('lang');
  try {
    // eslint-disable-next-line no-unsanitized/method
    translationModule = await import(`./locale/${lang}.js`);
  } catch (_error) {
    // eslint-disable-next-line no-console
    console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
    // eslint-disable-next-line no-unsanitized/method
    translationModule = await import(`./locale/en.js`);
  }
  svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
};

export default {
  name,
  async init({ decode64, dropXMLInternalSubset }) {
    const svgEditor = this;
    const { $id } = svgEditor.svgCanvas;
    await loadExtensionTranslation(svgEditor);

    const { svgCanvas } = svgEditor;

    const imgLibs = [
      {
        name: svgEditor.i18next.t(`${name}:imgLibs_0_name`),
        url: 'extensions/ext-imagelib/index.html',
        description: svgEditor.i18next.t(`${name}:imgLibs_0_description`)
      },
      {
        name: svgEditor.i18next.t(`${name}:imgLibs_1_name`),
        url: 'https://ian.umces.edu/symbols/catalog/svgedit/album_chooser.php?svgedit=3',
        description: svgEditor.i18next.t(`${name}:imgLibs_1_description`)
      }
    ];

    const allowedImageLibOrigins = imgLibs.map(({ url }) => {
      try {
        return new URL(url).origin;
      } catch (err) {
        return location.origin;
      }
    });

    /**
    *
    * @returns {void}
    */
    const closeBrowser = () => {
      $id("imgbrowse_holder").style.display = 'none';
      document.activeElement.blur(); // make sure focus is the body to correct issue #417
    };

    /**
    * @param {string} url
    * @returns {void}
    */
    const importImage = (url) => {
      const newImage = svgCanvas.addSVGElementFromJson({
        element: 'image',
        attr: {
          x: 0,
          y: 0,
          width: 0,
          height: 0,
          id: svgCanvas.getNextId(),
          style: 'pointer-events:inherit'
        }
      });
      svgCanvas.clearSelection();
      svgCanvas.addToSelection([ newImage ]);
      svgCanvas.setImageURL(url);
    };

    const pending = {};

    let mode = 's';
    let multiArr = [];
    let transferStopped = false;
    let preview, submit;

    /**
     * Contains the SVG to insert.
     * @typedef {PlainObject} ImageLibMessage
     * @property {"imagelib"} namespace Required to distinguish from any other messages of app.
     * @property {string} href Set to same value as previous `ImageLibMetaMessage` `id`.
     * @property {string} data The response (as an SVG string or URL)
    */

    /**
     * Used for setting meta-data before images are retrieved.
     * @typedef {PlainObject} ImageLibMetaMessage
     * @property {"imagelib"} namespace Required to distinguish from any other messages of app.
     * @property {string} name If the subsequent response is an SVG string or if `preview_url`
     *   is present, will be used as the title for the preview image. When an
     *   SVG string is present, will default to the first `<title>`'s contents or
     *   "(SVG #<Length of response>)" if none is present. Otherwise, if `preview_url`
     *   is present, will default to the empty string. Though `name` may be falsy,
     *   it is always expected to be present for meta messages.
     * @property {string} id Identifier (the expected `href` for a subsequent response message);
     * used for ensuring the subsequent response can be tied to this `ImageLibMetaMessage` object.
     * @property {string} [preview_url] When import mode is multiple, used to set an image
     * source along with the name/title. If the subsequent response is an SVG string
     * and there is no `preview_url`, the default will just be to show the
     * name/title. If the response is not an SVG string, the default will be to
     * show that response (i.e., the URL).
     * @property {string} entry Set automatically with div holding retrieving
     * message (until ready to delete)
     * @todo Should use a separate Map instead of `entry`
    */

    /**
     * @param {PlainObject} cfg
     * @param {string} cfg.origin
     * @param {ImageLibMetaMessage|ImageLibMessage|string} cfg.data String is deprecated when parsed to JSON `ImageLibMessage`
     * @returns {void}
     */
    async function onMessage({ origin, data }) {
      let response = data;
      if (!response || ![ 'string', 'object' ].includes(typeof response)) {
        // Do nothing
        return;
      }
      let id;
      let type;
      try {
        // Todo: This block can be removed (and the above check changed to
        //   insist on an object) if embedAPI moves away from a string to
        //   an object (if IE9 support not needed)
        response = typeof response === 'object' ? response : JSON.parse(response);
        if (response.namespace !== 'imagelib') {
          return;
        }
        if (!allowedImageLibOrigins.includes('*') && !allowedImageLibOrigins.includes(origin)) {
          // Todo: Surface this error to user?
          console.error(`Origin ${origin} not whitelisted for posting to ${window.origin}`);
          return;
        }
        const hasName = 'name' in response;
        const hasHref = 'href' in response;

        if (!hasName && transferStopped) {
          transferStopped = false;
          return;
        }

        if (hasHref) {
          id = response.href;
          response = response.data;
        }

        // Hide possible transfer dialog box
        if (document.querySelector('se-elix-alert-dialog')) {
          document.querySelector('se-elix-alert-dialog').remove();
        }
        type = hasName
          ? 'meta'
          : response.charAt(0);
      } catch (e) {
        // This block is for backward compatibility (for IAN and Openclipart);
        //   should otherwise return
        if (typeof response === 'string') {
          const char1 = response.charAt(0);

          if (char1 !== '{' && transferStopped) {
            transferStopped = false;
            return;
          }

          if (char1 === '|') {
            const secondpos = response.indexOf('|', 1);
            id = response.substr(1, secondpos - 1);
            response = response.substr(secondpos + 1);
            type = response.charAt(0);
          }
        }
      }

      let entry, curMeta, svgStr, imgStr;
      switch (type) {
      case 'meta': {
        // Metadata
        transferStopped = false;
        curMeta = response;

        // Should be safe to add dynamic property as passed metadata
        pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection]

        const name = (curMeta.name || 'file');

        const message = svgEditor.i18next.t('notification.retrieving').replace('%s', name);

        if (mode !== 'm') {
          await seConfirm(message);
          transferStopped = true;
        } else {
          entry = document.createElement('div');
          entry.textContent = message;
          entry.dataset.id = curMeta.id;
          preview.appendChild(entry);
          curMeta.entry = entry;
        }

        return;
      }
      case '<':
        svgStr = true;
        break;
      case 'd': {
        if (response.startsWith('data:image/svg+xml')) {
          const pre = 'data:image/svg+xml;base64,';
          const src = response.substring(pre.length);
          response = decode64(src);
          svgStr = true;
          break;
        } else if (response.startsWith('data:image/')) {
          imgStr = true;
          break;
        }
      }
      // Else fall through
      default:
        // TODO: See if there's a way to base64 encode the binary data stream
        // const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);

        // Assume it's raw image data
        // importImage(str);

        // Don't give warning as postMessage may have been used by something else
        if (mode !== 'm') {
          closeBrowser();
        } else {
          pending[id].entry.remove();
        }
        // await alert('Unexpected data was returned: ' + response, function() {
        //   if (mode !== 'm') {
        //     closeBrowser();
        //   } else {
        //     pending[id].entry.remove();
        //   }
        // });
        return;
      }

      switch (mode) {
      case 's':
        // Import one
        if (svgStr) {
          svgEditor.svgCanvas.importSvgString(response);
        } else if (imgStr) {
          importImage(response);
        }
        closeBrowser();
        break;
      case 'm': {
        // Import multiple
        multiArr.push([ (svgStr ? 'svg' : 'img'), response ]);
        curMeta = pending[id];
        let title;
        if (svgStr) {
          if (curMeta && curMeta.name) {
            title = curMeta.name;
          } else {
            // Try to find a title
            // `dropXMLInternalSubset` is to help prevent the billion laughs attack
            const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb]
            title = xml.querySelector('title').textContent || '(SVG #' + response.length + ')';
          }
          if (curMeta) {
            Array.from(preview.children).forEach(function (element) {
              if (element.dataset.id === id) {
                if (curMeta.preview_url) {
                  const img = document.createElement("img");
                  img.src = curMeta.preview_url;
                  const span = document.createElement("span");
                  span.appendChild(img);
                  element.append(span);
                } else {
                  element.textContent = title;
                }
                submit.removeAttribute('disabled');
              }
            });
          } else {
            const div = document.createElement("div");
            div.textContent = title;
            preview.appendChild(div);
            submit.removeAttribute('disabled');
          }
        } else {
          if (curMeta && curMeta.preview_url) {
            title = curMeta.name || '';
            entry = document.createElement('span');
            const img = document.createElement("img");
            img.src = curMeta.preview_url;
            entry.appendChild(img);
            entry.appendChild(document.createTextNode(title));
          } else {
            entry = document.createElement("img");
            entry.src = response;
          }

          if (curMeta) {
            Array.from(preview.children).forEach(function (element) {
              if (element.dataset.id === id) {
                element.appendChild(entry);
                submit.removeAttribute('disabled');
              }
            });
          } else {
            const div = document.createElement("div");
            div.appendChild(entry);
            preview.appendChild(div);
            submit.removeAttribute('disabled');
          }
        }
        break;
      } case 'o': {
        // Open
        if (!svgStr) { break; }
        closeBrowser();
        const ok = await svgEditor.openPrep();
        if (!ok) { return; }
        svgCanvas.clear();
        svgCanvas.setSvgString(response);
        // updateCanvas();
        break;
      }
      }
    }

    // Receive `postMessage` data
    window.addEventListener('message', onMessage, true);

    const insertAfter = (referenceNode, newNode) => {
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
    };

    const toggleMultiLoop = () => {
      multiArr.forEach(function(item, i){
        const type = item[0];
        const data = item[1];
        if (type === 'svg') {
          svgCanvas.importSvgString(data);
        } else {
          importImage(data);
        }
        svgCanvas.moveSelectedElements(i * 20, i * 20, false);
      });
      while (preview.firstChild)
        preview.removeChild(preview.firstChild);
      multiArr = [];
      $id("imgbrowse_holder").style.display = 'none';
    };

    /**
    * @param {boolean} show
    * @returns {void}
    */
    const toggleMulti = (show) => {
      $id('lib_framewrap').style.right = (show ? 200 : 10);
      $id('imglib_opts').style.right = (show ? 200 : 10);
      if (!preview) {
        preview = document.createElement('div');
        preview.setAttribute('id', 'imglib_preview');
        // eslint-disable-next-line max-len
        preview.setAttribute('style', `position: absolute;top: 45px;right: 10px;width: 180px;bottom: 45px;background: #fff;overflow: auto;`);
        insertAfter($id('lib_framewrap'), preview);

        submit = document.createElement('button');
        submit.setAttribute('content', 'Import selected');
        submit.setAttribute('disabled', true);
        submit.textContent = 'Import selected';
        submit.setAttribute('style', `position: absolute;bottom: 10px;right: -10px;`);
        $id('imgbrowse').appendChild(submit);
        submit.addEventListener('click', toggleMultiLoop);
        submit.addEventListener('touchend', toggleMultiLoop);
      }
      submit.style.display = (show) ? 'block' : 'none';
      preview.style.display = (show) ? 'block' : 'none';

    };

    /**
    *
    * @returns {void}
    */
    const showBrowser = () => {
      let browser = $id('imgbrowse');
      if (!browser) {
        const div = document.createElement('div');
        div.id = 'imgbrowse_holder';
        div.innerHTML = '<div id=imgbrowse class=toolbar_button></div>';
        insertAfter($id('svg_editor'), div);
        browser = $id('imgbrowse');

        const allLibs = svgEditor.i18next.t(`${name}:select_lib`);

        const divFrameWrap = document.createElement('div');
        divFrameWrap.id = 'lib_framewrap';

        const libOpts = document.createElement('ul');
        libOpts.id = 'imglib_opts';
        browser.append(libOpts);
        const frame = document.createElement('iframe');
        frame.src = "javascript:0";
        frame.style.display = 'none';
        divFrameWrap.append(frame);
        browser.prepend(divFrameWrap);

        const header = document.createElement('h1');
        browser.prepend(header);
        header.textContent = allLibs;
        header.setAttribute('style', `position: absolute;top: 0px;left: 0px;width: 100%;`);

        const button = document.createElement('button');
        // eslint-disable-next-line max-len
        button.innerHTML = '<img class="svg_icon" src="./images/cancel.svg" alt="icon" width="16" height="16" />' + svgEditor.i18next.t('common.cancel');
        browser.appendChild(button);
        button.addEventListener('click', function () {
          $id("imgbrowse_holder").style.display = 'none';
        });
        button.addEventListener('touchend', function () {
          $id("imgbrowse_holder").style.display = 'none';
        });
        button.setAttribute('style', `position: absolute;top: 5px;right: 10px;`);

        const leftBlock = document.createElement('span');
        leftBlock.setAttribute('style', `position: absolute;top: 5px;left: 10px;display: inline-flex;`);
        browser.appendChild(leftBlock);

        const back = document.createElement('button');
        back.style.visibility = "hidden";
        // eslint-disable-next-line max-len
        back.innerHTML = '<img class="svg_icon" src="./images/library.svg" alt="icon" width="16" height="16" />' + svgEditor.i18next.t(`${name}:show_list`);
        leftBlock.appendChild(back);
        back.addEventListener('click', function () {
          frame.setAttribute('src', 'about:blank');
          frame.style.display = 'none';
          libOpts.style.display = 'block';
          header.textContent = allLibs;
          back.style.display = 'none';
        });
        // eslint-disable-next-line sonarjs/no-identical-functions
        back.addEventListener('touchend', function () {
          frame.setAttribute('src', 'about:blank');
          frame.style.display = 'none';
          libOpts.style.display = 'block';
          header.textContent = allLibs;
          back.style.display = 'none';
        });
        back.setAttribute('style', `margin-right: 5px;`);
        back.style.display = 'none';

        const select = document.createElement('select');
        select.innerHTML = '<select><option value=s>' +
          svgEditor.i18next.t(`${name}:import_single`) + '</option><option value=m>' +
          svgEditor.i18next.t(`${name}:import_multi`) + '</option><option value=o>' +
          svgEditor.i18next.t(`${name}:open`) + '</option>';
        leftBlock.appendChild(select);
        select.addEventListener('change', function () {
          mode = this.value;
          switch (mode) {
          case 's':
          case 'o':
            toggleMulti(false);
            break;

          case 'm':
            // Import multiple
            toggleMulti(true);
            break;
          }
        });
        select.setAttribute('style', `margin-top: 10px;`);

        imgLibs.forEach(function ({ name, url, description }) {
          const li = document.createElement('li');
          libOpts.appendChild(li);
          li.textContent = name;
          li.addEventListener('click', function () {
            frame.setAttribute('src', url);
            frame.style.display = 'block';
            header.textContent = name;
            libOpts.style.display = 'none';
            back.style.display = 'block';
          });
          // eslint-disable-next-line sonarjs/no-identical-functions
          li.addEventListener('touchend', function () {
            frame.setAttribute('src', url);
            frame.style.display = 'block';
            header.textContent = name;
            libOpts.style.display = 'none';
            back.style.display = 'block';
          });
          let span = document.createElement("span");
          span.textContent = description;
          li.appendChild(span);
        });
      } else {
        $id("imgbrowse_holder").style.display = 'block';
      }
    };

    return {
      svgicons: 'ext-imagelib.xml',
      callback() {
        // Add the button and its handler(s)
        const buttonTemplate = document.createElement("template");
        buttonTemplate.innerHTML = `
        <se-menu-item id="tool_imagelib" label="Image library" src="./images/library.svg"></se-menu-item>
        `;
        insertAfter($id('tool_export'), buttonTemplate.content.cloneNode(true));
        $id('tool_imagelib').addEventListener("click", () => {
          showBrowser();
        });

        const style = document.createElement('style');
        style.textContent = '#imgbrowse_holder {' +
          'position: absolute;' +
          'top: 0;' +
          'left: 0;' +
          'width: 100%;' +
          'height: 100%;' +
          'background-color: rgba(0, 0, 0, .5);' +
          'z-index: 5;' +
          '}' +
          '#imgbrowse {' +
          'position: absolute;' +
          'top: 25px;' +
          'left: 25px;' +
          'right: 25px;' +
          'bottom: 25px;' +
          'min-width: 300px;' +
          'min-height: 200px;' +
          'background: #5a6162;' +
          'border: 1px outset #777;' +
          '}' +
          '#imgbrowse h1 {' +
          'font-size: 20px;' +
          'margin: .4em;' +
          'text-align: center;' +
          '}' +
          '#lib_framewrap,' +
          '#imgbrowse > ul {' +
          'position: absolute;' +
          'top: 45px;' +
          'left: 10px;' +
          'right: 10px;' +
          'bottom: 10px;' +
          'background: white;' +
          'margin: 0;' +
          'padding: 0;' +
          '}' +
          '#imgbrowse > ul {' +
          'overflow: auto;' +
          '}' +
          '#imgbrowse > div {' +
          'border: 1px solid #666;' +
          '}' +
          '#imglib_preview > div {' +
          'padding: 5px;' +
          'font-size: 12px;' +
          '}' +
          '#imglib_preview img {' +
          'display: block;' +
          'margin: 0 auto;' +
          'max-height: 100px;' +
          '}' +
          '#imgbrowse li {' +
          'list-style: none;' +
          'padding: .5em;' +
          'background: #E8E8E8;' +
          'border-bottom: 1px solid #5a6162;' +
          'line-height: 1.2em;' +
          'font-style: sans-serif;' +
          '}' +
          '#imgbrowse li > span {' +
          'color: #666;' +
          'font-size: 15px;' +
          'display: block;' +
          '}' +
          '#imgbrowse li:hover {' +
          'background: #FFC;' +
          'cursor: pointer;' +
          '}' +
          '#imgbrowse iframe {' +
          'width: 100%;' +
          'height: 100%;' +
          'border: 0;' +
          '}';
        document.head.appendChild(style);
      }
    };
  }
};