// ==UserScript==
// @name         FR:ES - BaseTao
// @namespace    https://www.reddit.com/user/RobotOilInc
// @version      0.2.1
// @description  Upload Taobao and Yupoo QCs from BaseTao to Imgur + QC server
// @author       RobotOilInc
// @match        https://www.basetao.net/index/myhome/myorder/*
// @match        https://basetao.net/index/myhome/myorder/*
// @match        https://www.basetao.com/index/myhome/myorder/*
// @match        https://basetao.com/index/myhome/myorder/*
// @grant        GM_openInTab
// @grant        GM_notification
// @license      MIT
// @include      https://www.basetao.net/index/orderphoto/itemimg/*
// @include      https://basetao.net/index/orderphoto/itemimg/*
// @include      https://www.basetao.com/index/orderphoto/itemimg/*
// @include      https://basetao.com/index/orderphoto/itemimg/*
// @require      https://unpkg.com/js-logger@1.6.1/src/logger.min.js
// @require      https://unpkg.com/spark-md5@3.0.1/spark-md5.min.js
// @require      https://unpkg.com/jquery@3.6.0/dist/jquery.min.js
// @require      https://unpkg.com/@phamthaibaoduy/jquery.ajax-retry@1.0.0/dist/jquery.ajax-retry.min.js
// @require      https://unpkg.com/@sentry/browser@6.4.1/build/bundle.min.js
// @require      https://unpkg.com/@sentry/tracing@6.4.1/build/bundle.tracing.min.js
// @require      https://unpkg.com/swagger-client@3.13.3/dist/swagger-client.browser.min.js
// @run-at       document-end
// @icon         https://i.imgur.com/1aQAxbC.png
// @downloadURL none
// ==/UserScript==

class Client {
  /**
     * @param version {string}
     * @param client {SwaggerClient}
     * @param userHash {string}
     */
  constructor(version, client, userHash) {
    this.version = version;
    this.client = client;
    this.userHash = userHash;
  }

  /**
     * @param element
     * @returns {Promise<null|string>}
     */
  existingAlbumByOrderId(element) {
    return this.client.apis.QualityControl.hasUploaded({
      usernameHash: this.userHash,
      orderId: element.orderId,
    }).then((response) => {
      if (typeof response.body === 'undefined') {
        return null;
      }

      if (!response.body.success) {
        return null;
      }

      return response.body.albumId;
    }).catch((err) => {
      Logger.error('Could not check if the album exists an album', err);
      Sentry.captureException(err);

      return '-1';
    });
  }

  /**
     * @param url {string}
     * @returns {Promise<boolean>}
     */
  exists(url) {
    return this.client.apis.QualityControl.exists({ url }).then((response) => {
      if (typeof response.body === 'undefined') {
        return null;
      }

      if (!response.body.success) {
        return null;
      }

      return response.body.exists;
    }).catch((err) => {
      Logger.error('Could not check if the album exists an album', err);
      Sentry.captureException(err);

      return false;
    });
  }

  /**
     * @param element {Element}
     * @param album {string}
     */
  uploadQc(element, album) {
    return this.client.apis.QualityControl.postQualityControlCollection({}, {
      method: 'post',
      requestContentType: 'application/json',
      requestBody: {
        usernameHash: this.userHash,
        albumId: album,
        color: element.color,
        orderId: element.orderId,
        purchaseUrl: element.url,
        sizing: element.size,
        itemPrice: element.itemPrice,
        freightPrice: element.freightPrice,
        source: `BaseTao to Imgur ${this.version}`,
        website: element.website,
      },
    });
  }
}

class Element {
  constructor($element) {
    const $baseElement = $element.parents('tr').find('td[colspan=\'2\']').first();

    this.object = $element;
    this.url = $baseElement.find('.goodsname_color').first().attr('href').replace('http://', 'https://')
      .replace('?uid=1', '');
    this.title = $baseElement.find('.goodsname_color').first().text();
    this.size = $baseElement.find('.size_color_color:nth-child(2) > u').text();
    this.orderId = $element.parents('tr').prev().find('td.tdpd > span:nth-child(2)').text();
    this.itemPrice = $element.parents('tr').find('td:nth-child(2) > span').first().text();
    this.freightPrice = $element.parents('tr').find('td:nth-child(3) > span').first().text();

    const color = $baseElement.find('.size_color_color:nth-child(1) > u').text();
    if (color !== '-' && color !== 'NO') {
      this.color = color;
    }
  }

  /**
     * @returns {{color, size}}
     */
  get sizingInfo() {
    return { color: this.color, size: this.size };
  }

  /**
     * @param imageUrls {string[]}
     */
  set images(imageUrls) {
    this.imageUrls = imageUrls;
  }

  /**
     * @returns {boolean}
     */
  get isSupported() {
    return this.url.indexOf('item.taobao.com') !== -1
            || this.url.indexOf('yupoo.com') !== -1;
  }

  /**
     * @returns {string}
     */
  get website() {
    if (this.url.indexOf('item.taobao.com') !== -1) {
      return 'taobao';
    }

    if (this.url.indexOf('yupoo.com') !== -1) {
      return 'yupoo';
    }

    return 'unknown';
  }
}

class Imgur {
  /**
   * @param version {string}
   * @param clientId {string}
   */
  constructor(version, clientId) {
    this.version = version;
    this.clientId = clientId;
  }

  /**
   * @param options
   * @returns {Promise<*|null>}
   */
  CreateAlbum(options) {
    return $.ajax({
      url: 'https://api.imgur.com/3/album',
      headers: { Authorization: `Client-ID ${this.clientId}` },
      type: 'POST',
      data: {
        title: options.title,
        privacy: 'hidden',
        description: `Auto uploaded using BaseTao to Imgur ${this.version}: https://greasyfork.org/scripts/387421-fr-es-basetao-extension`,
      },
    }).retry({ times: 3 }).catch((err) => {
      // Log the error somewhere
      Logger.error(`Could not make an album: ${err.statusText}`, err);

      // If we uploaded too fast, tell the user
      if (err.responseJSON.data.error.code === 429) {
        GM_notification(`Imgur is telling us to slow down: ${err.responseJSON.data.error.message}`, 'FR:ES - BaseTao');
        return;
      }

      // Tell the user that "something" is wrong
      GM_notification('Could not make an album, please try again later...', 'FR:ES - BaseTao');
      Sentry.captureException(err);
    });
  }

  /**
   * @param base64Image {string}
   * @param deleteHash {string}
   * @returns {Promise<*|null>}
   */
  async AddImageToAlbum(base64Image, deleteHash) {
    return $.ajax({
      url: 'https://api.imgur.com/3/image',
      headers: { Authorization: `Client-ID ${this.clientId}` },
      type: 'POST',
      data: { album: deleteHash, type: 'base64', image: base64Image },
    }).retry({ times: 3 }).then(() => true).catch((err) => {
      // If we uploaded too many files, tell the user
      if (err.responseJSON.data.error.code === 429) {
        GM_notification(`Imgur is telling us to slow down: ${err.responseJSON.data.error.message}`, 'FR:ES - BaseTao');
        return false;
      }

      // Log the error otherwise
      Logger.error('An error happened when uploading the image', err);
      Sentry.captureException(err);

      return false;
    });
  }

  RemoveAlbum(deleteHash) {
    $.ajax({
      url: `https://api.imgur.com/3/album/${deleteHash}`,
      headers: { Authorization: `Client-ID ${this.clientId}` },
      type: 'DELETE',
    }).retry({ times: 3 });
  }
}

const toDataURL = (url) => fetch(url)
  .then((response) => response.blob())
  .then((blob) => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  }));

/**
 * @param base64Data {string}
 * @returns {Promise<string>}
 */
const WebpToJpg = function (base64Data) {
  return new Promise((resolve) => {
    const image = new Image();
    image.src = base64Data;

    image.onload = () => {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');

      canvas.width = image.width;
      canvas.height = image.height;
      context.drawImage(image, 0, 0);

      resolve(canvas.toDataURL('image/jpeg'));
    };
  });
};

class Processor {
  /**
   * @param qcClient {Client}
   * @param imgurClient {Imgur}
   */
  constructor(qcClient, imgurClient) {
    this.qcClient = qcClient;
    this.imgurClient = imgurClient;
  }

  /**
   * @param element {Element}
   * @returns {Promise<void>}
   */
  async UploadToImgur(element) {
    const $processing = $('<ul><li><span style="cursor: wait;margin-left:-29px;"><img src="https://i.imgur.com/lnFQTQz.gif" alt="Processing..."></span></li></ul>');
    const $base = element.object;
    $base.after($processing).hide();

    GM_notification('Pictures are being uploaded....', 'FR:ES - BaseTao');

    // Create the album
    const response = await this.imgurClient.CreateAlbum(element);
    const deleteHash = response.data.deletehash;
    const albumId = response.data.id;

    const AlbumLink = `https://imgur.com/a/${albumId}`;

    // Upload all QC images
    let uploadedImages = 0;
    const promises = [];
    $.each(element.imageUrls, (key, imageUrl) => {
      // Convert to base64, since Imgur cannot access our images
      promises.push(toDataURL(imageUrl).then(async (data) => {
        // Store our base64 and if the file is WEBP, convert it to JPG
        let base64Image = data;
        if (base64Image.indexOf('image/webp') !== -1) {
          base64Image = await WebpToJpg(base64Image);
        }

        // Remove the unnecessary `data:` part
        const cleanedData = base64Image.replace(/(data:image\/.*;base64,)/, '');

        // Upload the image to the album
        return this.imgurClient.AddImageToAlbum(cleanedData, deleteHash);
      }).then((uploaded) => {
        if (uploaded === false) {
          return;
        }

        uploadedImages++;
      }));
    });

    // Wait until everything has been tried to be uploaded
    await Promise.all(promises);

    // If not all images have been uploaded, abort everything
    if (uploadedImages !== element.imageUrls.length) {
      GM_notification('Error: Image upload failed. Try again later.', 'FR:ES - BaseTao');
      this.imgurClient.RemoveAlbum(deleteHash);

      $processing.remove();
      $base.show();

      return;
    }

    // Tell the user it was uploaded and open the album in the background
    GM_notification('Pictures have been uploaded!', 'FR:ES - BaseTao');
    GM_openInTab(AlbumLink, true);

    // Tell QC Suite about our uploaded QC's (if it's from TaoBao)
    if (element.isSupported) {
      this.qcClient.uploadQc(element, albumId);
    }

    // Wrap the logo in a href to the new album
    const $image = $base.find('img');
    $image.wrap(`<a href='${AlbumLink}' target='_blank' title='Go to album'></a>`);
    $image.removeAttr('title');

    // Remove processing
    $processing.remove();

    // Update the marker
    const $qcMarker = $base.find('.qc-marker:not(:first-child)').first();
    $qcMarker.attr('title', 'You have uploaded your QC')
      .css('cursor', 'help')
      .css('color', 'green')
      .text('✓');

    // Remove the click handler
    $base.off();

    // Show it again
    $base.show();
  }
}

const _SWAGGER_DOC_URL = 'https://localhost:8000/api/doc.json';
const _VERSION = GM_info.script.version;

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

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

  // Setup Sentry for proper error logging, which will make my lives 20x easier, use XHR since fetch dies.
  Sentry.init({
    dsn: 'https://de336397d0154661b3c5864ef6421044@o740964.ingest.sentry.io/5786558',
    transport: Sentry.Transports.XHRTransport,
    release: `basetao-${_VERSION}`,
    environment: 'production',
  });

  const username = $('#dropdownMenu1').text();
  if (typeof username === 'undefined' || username == null || username === '') {
    GM_notification('You need to be logged in to use this extension.', 'FR:ES - BaseTao');

    return;
  }

  // Ensure we know who triggered the error, but use the username hash
  const userHash = SparkMD5.hash(username);
  Sentry.setUser({ userHash });

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

  // Try to create Swagger client from our own documentation
  try {
    client = await new SwaggerClient({ url: _SWAGGER_DOC_URL });
  } catch (error) {
    GM_notification('We are unable to connect to FR:ES. Please try again later.', 'FR:ES - BaseTao');
    Logger.error(`We are unable to connect to FR:ES: ${_SWAGGER_DOC_URL}`, error);
    Sentry.captureException(error);

    return;
  }

  // Create QC client
  const qcClient = new Client(_VERSION, client, userHash);

  // Create the Imgur client
  const ClientIds = ['7f5970be23f46f7', '97a5f748b20b0ad', '4d01890bba4949c', 'fe9f4d770f42e53', '0999af252aaaba1', '6870f32f716ff3b', 'bf02cd90c8a4f1a', '5ed540f56122e1c'];
  const imgurClient = new Imgur(_VERSION, ClientIds[Math.floor(Math.random() * ClientIds.length)]);

  // Create the processor which does the heavy lifting
  const processor = new Processor(qcClient, imgurClient);

  // Create a simple UploadHandler
  const uploadHandler = async function () {
    const $this = $(this);
    const itemUrl = $this.data('item-url');
    const element = new Element($this);

    // Go to the QC pictures URL and grab all image src's
    $.get(itemUrl, (data) => {
      if (data.indexOf('long time no operation ,please sign in again') !== -1) {
        Logger.info('No longer logged in, reloading page for user...');
        window.location.reload();

        return;
      }

      const imageUrls = [];
      $('<div/>').html(data).find('div.container.container-top60 > img').each(function () {
        imageUrls.push($(this).attr('src'));
      });

      element.images = imageUrls;

      processor.UploadToImgur(element);
    });
  };

  $('.myparcels-ul').find('span.glyphicon.glyphicon-picture').each(async function () {
    const $this = $(this);
    const element = new Element($this);

    // This plugin only works for certain websites, so check if element is supported
    if (!element.isSupported) {
      const $upload = $('<ul><li><span style="cursor: pointer;margin-left:-29px;"><img src="https://s.imgur.com/images/favicon-16x16.png" alt="Create a basic album"></span></li></ul>');
      $upload.find('span').first().after($('<span class="qc-marker" style="cursor:help;margin-left:5px;color:red;font-weight: bold;" title="Not a supported URL, but you can still create an album. The QC\'s are not stored and you\'ll have to create a new album if you lose the link.">✖</span>'));
      $upload.data('item-url', $(this).parent().attr('href'));
      $upload.on('click', uploadHandler);

      $this.parents('td').first().append($upload);

      return;
    }

    const $loading = $('<ul><li><span style="cursor: wait;margin-left:-29px;"><img src="https://i.imgur.com/lnFQTQz.gif" alt="Loading..."></span></li></ul>');
    $this.parents('td').first().append($loading);

    // Define upload object
    const $upload = $('<ul><li><span class="qc-marker" style="cursor: pointer;margin-left:-29px;"><img src="https://s.imgur.com/images/favicon-16x16.png" alt="Upload your QC"></span></li></ul>');
    $upload.data('item-url', $(this).parent().attr('href'));

    // If we couldn't talk to FR:ES, assume everything is dead and use the basic uploader.
    const albumId = await qcClient.existingAlbumByOrderId(element);
    if (albumId === '-1') {
      $upload.find('span').first().after($('<span class="qc-marker" style="cursor:help;margin-left:5px;color:red;font-weight: bold;" title="FR:ES returned an error, but you can still create an album. The QC\'s are not stored and you\'ll have to create a new album if you lose the link.">⚠️</span>'));
      $upload.data('item-url', $(this).parent().attr('href'));
      $upload.on('click', uploadHandler);

      $this.parents('td').first().append($upload);
      $loading.remove();

      return;
    }

    // Has anyone ever uploaded a QC, if not, show a red marker
    const exists = await qcClient.exists(element.url);
    if (!exists) {
      $upload.find('span').first().after($('<span class="qc-marker" style="cursor:help;margin-left:5px;color:red;font-weight: bold;" title="No QC in database, please upload.">(!)</span>'));
      $upload.on('click', uploadHandler);

      $this.parents('td').first().append($upload);
      $loading.remove();

      return;
    }

    // Have you ever uploaded a QC? If so, link to that album
    const $image = $upload.find('img');
    if (albumId !== null && albumId !== '-1') {
      $upload.find('span').first().after($('<span class="qc-marker" style="cursor:help;margin-left:5px;color:green;font-weight: bold;" title="You have uploaded a QC">✓</span>'));
      $image.wrap(`<a href='https://imgur.com/a/${albumId}' target='_blank' title='Go to album'></a>`);
      $image.removeAttr('title');

      $this.parents('td').first().append($upload);
      $loading.remove();

      return;
    }

    // A previous QC exists, but you haven't uploaded yours yet, show orange marker
    $upload.find('span').first().after($('<span class="qc-marker" style="cursor:help;margin-left:5px;color:orange;font-weight: bold;" title="Your QC is not yet in the database, please upload.">(!)</span>'));
    $upload.on('click', uploadHandler);

    $this.parents('td').first().append($upload);
    $loading.remove();
  });
}());