// ==UserScript==
// @name        data extraction linkedin
// @namespace   Violentmonkey Scripts
// @match       https://www.linkedin.com/*
// @grant       GM_getValue
// @grant       GM_setValue
// @grant       GM_getValues
// @grant       GM_setValues
// @grant       GM_listValues
// @grant       GM_deleteValue
// @grant       GM_deleteValues
// @grant       GM_addStyle
// @grant       GM_addElement
// @version     0.1
// @author      Siarhei Siniak
// @license Unlicense
// @description 10/08/2024, 8:44:59 PM

// @run-at      document-body
// @inject-into content
// @noframes
// ==/UserScript==

/*

Use this extension to disalbe CSP for linkedin

https://addons.mozilla.org/en-US/firefox/addon/header-editor/
https://github.com/FirefoxBar/HeaderEditor
https://github.com/violentmonkey/violentmonkey/issues/1335
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src


{
  "request": [],
  "sendHeader": [],
  "receiveHeader": [
    {
      "enable": true,
      "name": "disable CSP for linkedin",
      "ruleType": "modifyReceiveHeader",
      "matchType": "domain",
      "pattern": "www.linkedin.com",
      "exclude": "",
      "group": "Ungrouped",
      "isFunction": false,
      "action": {
        "name": "content-security-policy",
        "value": ""
      }
    }
  ],
  "receiveBody": []
}
*/

import $ from "jquery";
import * as VM from "@violentmonkey/dom";

interface Entry {
  header: string
  teaser?: string
};

interface State {
  search: string
};

class Linkedin {
  data : Map<string, any>;


  is_fullscreen: boolean = false;

  ui : {
    root: any | null
    entries: any | null
    search: any | null
    state: any | null
  };

  state : State;
  old_state: State | null = null;

  constructor() {
    this.data = new Map();
    this.ui = {
      root: null,
      entries: null,
      search: null,
      state: null,
    };

    this.state = {
      search: '',
    };
  }

  clean_page() {
    if (location.href.search('empty_body=true') != -1)
    {
      this.is_fullscreen = true;
      $('head').empty();
      $('body').empty();
      $('body').addClass('no-border');
    }
  }

  async data_load() {
    let self = this;
    const keys = await GM_listValues();
    let loaded = 0;
    for (let o of keys)
    {
      if (!o.startsWith('data-'))
      {
        return;
      }

      self.data.set(
        o.slice(5,),
        await GM_getValue(o)
      );
      loaded += 1;
    }

    console.log({action: 'loaded', total: loaded});
  }

  string_reduce (text: string) {
    return text.replaceAll(/\s+/gi, ' ').trim();
  }

  parse_header() {
    let self = this;

    return [
      $(
        '.scaffold-finite-scroll__content > div > .relative .update-components-header'
      ).map((i, o) => ({
        header: o.innerText
      })),
      $(
        '.scaffold-finite-scroll__content > div > .relative .update-components-actor'
      ).map((i, o) => {
          let header = $(o);
          let teaser = $(o).parents('.relative')
            .parent().find('.feed-shared-update-v2__description-wrapper');
          return {
            header: self.string_reduce(header.text()),
            teaser: self.string_reduce(teaser.text()),
          };
      })
    ]
  }

  async data_add (entry: Entry) {
    let self = this;

    if (self.data.has(entry.header))
    {
      return false;
    }

    self.data.set(entry.header, {
      entry: entry,
      ts: (new Date()).valueOf(),
    });

    await GM_setValue(
      'data-' + entry.header,
      self.data.get(entry.header)
    )

    console.log('saved ' + entry.header);

    console.log(self.data.get(entry.header));

    return true;
  }

  async document_on_changed () {
    let self = this;

    let state_changed = false;

    if (
      JSON.stringify(self.state_get()) != JSON.stringify(self.state)
    )
    {
      state_changed = true;
      self.old_state = self.state;
      self.state = self.state_get();
    }

    let current_data = self.parse_header();

    let changed = false;

    for (let o of current_data[0])
    {
      let current_changed = await self.data_add(o);
      if (current_changed)
      {
        changed = current_changed;
      }
    }

    for (let o of current_data[1])
    {
      let current_changed = await self.data_add(o);
      if (current_changed)
      {
        changed = current_changed;
      }
    }

    if (
      changed || (
      state_changed ||
        self.ui.entries === null && self.data.size > 0
      )
    )
    {
      self.display();
    }
  }

  listener_add() {
    let self = this;

    return VM.observe(
      document.body,
      () => {
        self.document_on_changed();
      }
    );
  }

  display_init() {
    let self = this;

    self.ui.root = $(`<div class=online-fxreader-linkedin>`);

    $(document.body).append(self.ui.root);

    if (self.is_fullscreen)
    {
      self.ui.root.addClass('fullscreen');
    }

    $('head').append($('<style>').html(`
div.online-fxreader-linkedin {
  height: 10em;
  overflow: hidden;
  z-index: 9999;
  position: fixed;
  top: 5em;
  background: yellow;
  margin-left: 1em;
  word-wrap: anywhere;
  white-space: break-spaces;
  margin-right: 1em;
  width: calc(100% - 2em);
}

.d-none {
  display: none !important;
}

.online-fxreader-linkedin.tray-active .search,
.online-fxreader-linkedin.tray-active .entries
{
  display: none;
}

.online-fxreader-linkedin .tray
{
  cursor: pointer;
  position: absolute;
  right: 0px;
  z-index: 9999;
}

.online-fxreader-linkedin.tray-active
{
  right: 1em;
  width: 3em;
  height: 3em !important;
}

.online-fxreader-linkedin .search
{
  display: flex;
  position: sticky;
  top: 0px;
  background-color: #eee;
}

.online-fxreader-linkedin .search input
{
  width: 60em;
}

.online-fxreader-linkedin .entries
{
  overflow: scroll;
  height: 100%;
}

.online-fxreader-linkedin .entry.even
{
  background-color: #eee;
}

.online-fxreader-linkedin .entry.odd
{
  background-color: #ddd;
}

.online-fxreader-linkedin .search,
.online-fxreader-linkedin .search input
{
  height: 2em;
  line-height: 2em;
  box-sizing: border-box;
}

.no-border {
  padding: unset;
  margin: unset;
}

.online-fxreader-linkedin:hover,
.online-fxreader-linkedin.fullscreen
{
  height: 80vh;
}
    `));
    GM_addElement('script', {
      "textContent": `
class Linkedin {
  constructor() {
    let self = this;

    this.has_callbacks = false;

    this.ui = {
      root: () => {
        return document.getElementsByClassName('online-fxreader-linkedin')[0];
      },
    };

    self.ui.search = () => {
      let search = self.ui.root().getElementsByClassName('search')[0];
      let search_input = search.getElementsByTagName('input')[0];
      return search_input;
    };
    self.ui.tray = () => {
      // let search = self.ui.root().getElementsByClassName('search')[0];
      let tray = self.ui.root().getElementsByClassName('tray')[0];
      return tray;
    };

    self.ui.state = () => {
      let state = self.ui.root().getElementsByClassName('state')[0];
      return state;
    };
  }

  add_callbacks() {
    let self = this;
    self.ui.tray().addEventListener(
      'click', function(e) {
        let o = e.currentTarget;
        let cl = o.classList;
        let r = self.ui.root();
        if (cl.contains('active'))
        {
          cl.remove('active');
          r.classList.add('tray-active');
        }
        else
        {
          cl.add('active');
          r.classList.remove('tray-active');
        }
      }
    );
  }

  blah(class_name) {
    if (!this.has_callbacks)
    {
      this.add_callbacks();
      this.has_callbacks = true;
    }

    console.log('blah');
    Array.from(
      document.getElementsByClassName(class_name)
    ).forEach((o) => o.remove());
  }

  state_update(partial) {
    let self = this;

    let ui_state = self.ui.state();

    let old_state = JSON.parse(ui_state.innerText);
    ui_state.innerText = JSON.stringify(
      {
        ...old_state,
        ...partial
      }
    );
  }

  search_on_change() {
    let self = this;
    let search = self.ui.search();

    self.state_update(
      {
        search: search.value
      }
    );
  }
};
const online_fxreader_linkedin = new Linkedin();

        console.log('started');
      `
    });

  }

  state_get() {
    let self = this;

    if (self.ui.state && self.ui.state.text() !== '')
    {
      return JSON.parse(self.ui.state.text());
    }
    else
    {
      return {};
    }
  }

  state_set(partial: any) {
    let self = this;

    self.ui.state.text(
      {
        ...self.state_get(),
        ...partial
      }
    );
  }

  display() {
    let self = this;

    let sorted_entries = Array.from(self.data.entries()).sort(
      (a, b) => a[1].ts - b[1].ts
    );

    // self.ui.root.empty();

    if (self.ui.search === null)
    {
      self.ui.root.append(
        $('<div>').addClass('tray').text('SHOW/HIDE')
      );

      let search = $('<div>').addClass('search').append(
        $('<input>').val(self.state.search)
      ).attr(
        'onkeyup',
        `online_fxreader_linkedin.search_on_change()`,
      );
      search.append(
        $('<div>').addClass('total')
      );
      self.ui.root.append(search);
      self.ui.search = search;
    }

    if (self.ui.state === null)
    {
      self.ui.state = $('<div>').addClass('state d-none').text(
        JSON.stringify(self.state)
      );
      self.ui.root.append(self.ui.state);
    }
    else
    {
    }
    //state_set(old_state);

    let entries = null;

    if (self.ui.entries === null)
    {
      entries = $('<div>').addClass('entries');
      self.ui.root.append(entries);
      self.ui.entries = entries
    }
    else
    {
      entries = self.ui.entries;
      entries.empty();
    }

    let keywords = (self.state?.search || '').split(/\s+/).map((o) => {
      let action = '';
      let word = '';

      if (o.length > 0)
      {
        if (o[0] == '+')
        {
          action = 'include';
          word = o.slice(1,);
        }
        else if (o[0] == '-')
        {
          action = 'exclude';
          word = o.slice(1,);
        }
        else
        {
          action = 'include';
          word = o;
        }
      }

      return {
        action,
        word,
      };

    }).filter((o) => o.action !== '' && o.word !== '');

    let filtered_entries = sorted_entries.filter((o) => {
      let match = true;

      let text = JSON.stringify(o);

      for (let k of keywords)
      {
        if (k.action == 'include')
        {
          if (text.search(k.word) == -1)
          {
            match = false;
          }
        }
        else if (k.action == 'exclude')
        {
          if (text.search(k.word) != -1)
          {
            match = false;
          }
        }

        if (!match)
        {
          break;
        }
      }

      return match;
    })

    self.ui.search.find('.total').text(
      filtered_entries.length
    );

    let i = 0;
    for (let o of filtered_entries.reverse())
    {
      let raw = JSON.stringify(o[1]);
      let ts = (new Date(o[1].ts));
      let entry = $('<div>').addClass('entry');

      if (i % 2 == 0)
      {
        entry.addClass('even');
      }
      else
      {
        entry.addClass('odd');
      }

      entry.append(
        $('<div>').addClass('ts').text(
          ts.toISOString(),
        )
      );
      entry.append(
        $('<div>').addClass('header').text(
          o[1].entry.header
        )
      );
      entry.append(
        $('<div>').addClass('teaser').text(
          o[1].entry.teaser
        )
      );
      // entry.append($('<pre>').text(raw));

      entries.append(entry);
      ++i;
    }

    GM_addElement('script', {
      "class": 'bridge',
      "textContent": `
        online_fxreader_linkedin.blah('bridge');
      `
    });
  }
}

const l = new Linkedin();

(async () => {
  l.clean_page();

  await l.data_load();

  const disconnect = l.listener_add();
  l.display_init();
})();
