// ==UserScript==
// @name         FR:Reborn
// @namespace    https://www.reddit.com/user/RobotOilInc
// @version      0.6.7
// @description  Show all QCs in TaoBao/Yupoo/etc
// @author       RobotOilInc
// @match        https://*.taobao.com/item.htm*
// @match        https://*.tmall.com/item.htm*
// @match        https://*.yupoo.com/albums/*
// @match        https://weidian.com/item.html*
// @match        https://*.*.weidian.com/item.html*
// @match        https://detail.1688.com/offer/*
// @grant        GM_addStyle
// @grant        GM_getResourceText
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_registerMenuCommand
// @license      MIT
// @homepageURL  https://www.qc-server.cf/
// @supportURL   https://greasyfork.org/en/scripts/426976-fr-es-viewer
// @require      https://unpkg.com/sweetalert2@11/dist/sweetalert2.min.js
// @require      https://unpkg.com/js-logger@1.6.1/src/logger.min.js
// @require      https://unpkg.com/jquery@3.6.0/dist/jquery.min.js
// @require      https://unpkg.com/swagger-client@3.13.3/dist/swagger-client.browser.min.js
// @require      https://unpkg.com/iframe-resizer@4.3.2/js/iframeResizer.min.js
// @require      https://greasyfork.org/scripts/11562-gm-config-8/code/GM_config%208+.js?version=66657
// @resource     sweetalert2 https://unpkg.com/sweetalert2@11.0.15/dist/sweetalert2.min.css
// @run-at       document-end
// @icon         https://i.imgur.com/mYBHjAg.png
// @downloadURL none
// ==/UserScript==

/**
 * @param text {string}
 * @param type {null|('success'|'error'|'warning'|'info')}
 */
const Snackbar = function (text, type = null) {
  if (typeof type !== 'undefined' && type != null) {
    Swal.fire({
      title: text,
      icon: type,
      position: 'bottom-end',
      showConfirmButton: false,
      allowOutsideClick: false,
      backdrop: false,
      timer: 1500,
    });

    return;
  }

  Swal.fire({
    title: text,
    position: 'bottom-end',
    showConfirmButton: false,
    allowOutsideClick: false,
    backdrop: false,
    timer: 1500,
  });
};

/**
 * Waits for an element satisfying selector to exist, then resolves promise with the element.
 * Useful for resolving race conditions.
 *
 * @param selector
 * @returns {Promise}
 */
const elementReady = function (selector) {
  return new Promise((resolve) => {
    const el = document.querySelector(selector);
    if (el) {
      resolve(el);
    }

    new MutationObserver((mutationRecords, observer) => {
      // Query for elements matching the specified selector
      Array.from(document.querySelectorAll(selector)).forEach((element) => {
        resolve(element);
        // Once we have resolved we don't need the observer anymore.
        observer.disconnect();
      });
    }).observe(document.documentElement, {
      childList: true,
      subtree: true,
    });
  });
};

class Source1688 {
  /**
   * @param client {SwaggerClient}
   */
  constructor(client) {
    this.client = client;
  }

  loadIframe($iframe) {
    const id = window.location.href.match(/offer\/(\d+)/i)[1];

    // Build URL
    const request = SwaggerClient.buildRequest({
      spec: this.client.spec,
      operationId: 'view1688',
      parameters: { id },
      responseContentType: 'application/json',
    });

    $iframe.hide().css('width', '100%').attr('src', request.url);
    $iframe.wrap(function () {
      return `
<div className="widget-custom offerdetail_ditto_qc_view" data-widget-name="offerdetail_ditto_qc_view">
    <div className="widget-custom-container">
        <div className="obj-content">${$(this).html()}</div>
    </div>
</div>`;
    });

    // Finally append (once it exists)
    elementReady('#site_content .widget-custom.offerdetail_ditto_attributes')
      .then((element) => { $(element).after($iframe); });
  }

  /**
   * @param hostname {string}
   * @returns {boolean}
   */
  supports(hostname) {
    return hostname.includes('1688.com');
  }
}

class SourceTaobao {
  /**
   * @param client {SwaggerClient}
   */
  constructor(client) {
    this.client = client;
  }

  loadIframe($iframe) {
    const searchParams = new URLSearchParams(window.location.search);
    const id = searchParams.get('id');

    // Build URL
    const request = SwaggerClient.buildRequest({
      spec: this.client.spec,
      operationId: 'viewTaobao',
      parameters: { id },
      responseContentType: 'application/json',
    });

    // Hide, to later show and add the src
    $iframe.hide()
      .css('width', '770px')
      .attr('src', request.url);

    // Finally append (once it exists)
    elementReady('.attributes#attributes')
      .then((element) => { $(element).after($iframe); });
  }

  /**
   * @param hostname {string}
   * @returns {boolean}
   */
  supports(hostname) {
    return hostname.includes('taobao')
      || hostname.includes('tmall');
  }
}

class SourceWeidian {
  /**
   * @param client {SwaggerClient}
   */
  constructor(client) {
    this.client = client;
  }

  loadIframe($iframe) {
    const id = window.location.href.match(/[?&]itemId=(\d+)/i)[1];

    // Build URL
    const request = SwaggerClient.buildRequest({
      spec: this.client.spec,
      operationId: 'viewWeidian',
      parameters: { id },
      responseContentType: 'application/json',
    });

    // Hide, to later show and add the src
    $iframe.hide()
      .css('width', '100%')
      .attr('src', request.url);

    // Finally append (once it exists)
    elementReady('.item-info > .item-wrap')
      .then((element) => { $(element).after($iframe); });
  }

  /**
   * @param hostname {string}
   * @returns {boolean}
   */
  supports(hostname) {
    return hostname.includes('weidian.com');
  }
}

class SourceYupoo {
  /**
   * @param client {SwaggerClient}
   */
  constructor(client) {
    this.client = client;
  }

  loadIframe($iframe) {
    const id = window.location.href.match(/^https?:\/\/.*\.x\.yupoo\.com\/albums\/(\d+)/)[1];
    const author = window.location.hostname.replace('.x.yupoo.com', '');

    // Build URL
    const request = SwaggerClient.buildRequest({
      spec: this.client.spec,
      operationId: 'viewYupoo',
      parameters: { id, author },
      responseContentType: 'application/json',
    });

    // Hide, to later show and add the src
    $iframe.hide()
      .attr('src', request.url);

    // Finally append (once it exists)
    elementReady('.showalbum__imagecardwrap')
      .then((element) => { $(element).append($iframe); });
  }

  /**
   * @param hostname {string}
   * @returns {boolean}
   */
  supports(hostname) {
    return hostname.includes('yupoo.com');
  }
}

/**
 * @param client {SwaggerClient}
 * @param hostname {string}
 */
function getSource(client, hostname) {
  const sources = [new Source1688(client), new SourceTaobao(client), new SourceYupoo(client), new SourceWeidian(client)];

  let source = null;
  Object.values(sources).forEach((value) => {
    if (value.supports(hostname)) {
      source = value;
    }
  });

  return source;
}

// Inject snackbar css style
GM_addStyle(GM_getResourceText('sweetalert2'));

// Setup proper settings menu
GM_config.init('Settings', {
  serverSection: {
    label: 'QC Server settings',
    type: 'section',
  },
  swaggerDocUrl: {
    label: 'Swagger documentation URL',
    type: 'text',
    default: 'https://www.qc-server.cf/api/doc.json',
  },
});

// Reload page if config changed
GM_config.onclose = (saveFlag) => {
  if (saveFlag) {
    window.location.reload();
  }
};

// Register menu within GM
GM_registerMenuCommand('Settings', GM_config.open);

// eslint-disable-next-line func-names
(async function () {
  // Setup the logger.
  Logger.useDefaults();

  // Log the start of the script.
  Logger.info(`Starting extension, version ${GM_info.script.version}`);

  /** @type {SwaggerClient} */
  let client;

  // Try to create Swagger client from our own documentation
  try {
    client = await new SwaggerClient({ url: GM_config.get('swaggerDocUrl') });
  } catch (error) {
    Snackbar('We are unable to connect to FR:Reborn, features will be disabled.');
    Logger.error(`We are unable to connect to FR:Reborn: ${GM_config.get('swaggerDocUrl')}`, error);

    return;
  }

  // Create iFrame we will pass to all loaders, will show content once something has been loaded
  const $iframe = $('<iframe id="qciframe" style="border:0" />');
  $iframe.on('load', () => {
    $iframe.iFrameResize({ checkOrigin: ['https://localhost:8000', 'https://www.qc-server.cf'], bodyMargin: 10, bodyPadding: 10 });
    $iframe.show();
  });

  // Get the proper source view, if any
  const source = getSource(client, window.location.hostname);
  if (source !== null) {
    source.loadIframe($iframe);

    return;
  }

  Logger.error('Unsupported website');
}());