const ajax = new window.Ajax();

function LiveReloader() {
  const _ = this;

  /**
   * @type {string}
  */
  const PROTOCOL = 'https://';

  /**
   * @type {string}
  */
  const URL_LES_ENDPOINT_DEV = 'int-api.live-events.be.as.com/v1/liveevents/';

  /**
   * @type {string}
  */
  const URL_LES_ENDPOINT_PROD = 'api.live-events.be.as.com/v1/liveevents/';

  /**
   * @type {number}
  */
  const delay = 60000;

  /**
   * @type {string}
  */
  let environment;

  /**
   * @type {string}
  */
  let liveEvent;

  /**
   * @type {number}
  */
  let latestUpdate = null;

  /**
   * @type {number}
  */
  let coverageEndDateTime = null;

  /**
   * @type {object}
  */
  let pinned = null;

  /**
   * @type {string}
  */
  let endpoint;

  /**
   * @type {string}
  */
  let edition;

  /**
   * @type {string}
  */
  let timezone;

  /**
   * @type {string}
  */
  let type;

  /**
   * @type {number}
  */
  let interval;

  /**
   * @type {object}
  */
  let params;

  /**
   * Main function to start
   *
  */
  _.init = () => {
    _.setExternalData();
    _.transformLesId();
    _.setEndpoint();
    _.assignParams();
    _.setEvents();
  };

  /**
   * Get the information from the DOM the id externalDataLes
   *
  */
  _.setExternalData = () => {
    let externalDataLes = null;
    let props = null;
    externalDataLes = document.getElementById('externalDataLes');
    if (externalDataLes) {
      props = JSON.parse(externalDataLes.firstChild.data).data;
      ({
        coverageEndDateTime, environment, latestUpdate, liveEvent, timezone, type, edition,
      } = props);
    }
  };

  /**
   * Set the events
   *
  */
  _.setEvents = () => {
    const panelMessage = document.getElementById('stream-panel-message');
    if (panelMessage) {
      panelMessage.addEventListener('click', (event) => {
        event.preventDefault();
        const offsetMargin = 20;
        const target = document.getElementById(this.getAttribute('href').replace('#', ''));
        const headerHeight = _.getHeaderHeight();

        _.setAutoScrolled(1000);
        window.scrollBy({ top: (target.getBoundingClientRect().top - headerHeight - offsetMargin), behavior: 'smooth' });
      });
    }
  };

  /**
   * Set the autoScrolled to the message New Message Card
   *
   * @param {number} time
  */
  _.setAutoScrolled = (time) => {
    window.autoscrolled = true;
    setTimeout(() => {
      window.autoscrolled = false;
    }, time);
  };

  /**
   * Assign the endpoint, pinned and params
   *
  */
  _.assignParams = () => {
    endpoint = `${endpoint}${liveEvent}/messages`;
    pinned = _.obtainPinned();
    params = { fromDate: latestUpdate, type };
  };

  /**
   * Set the endpoint depends of the environment
   *
  */
  _.setEndpoint = () => {
    endpoint = environment === 'dev' ?
      `${PROTOCOL}${URL_LES_ENDPOINT_DEV}` :
      `${PROTOCOL}${URL_LES_ENDPOINT_PROD}`;
  };

  /**
   * Check the time of coverage of the live
   *
   * @returns {boolean}
  */
  _.checkEndtime = () => {
    return coverageEndDateTime && new Date(new Date(coverageEndDateTime).toLocaleString('en-US', { timeZone: timezone })).getTime()
      < (new Date(new Date().toLocaleString('en-US', { timeZone: timezone })).getTime());
  };

  /**
   * Transform the key when the live of LES is created in EPET plataform with old key
   *
   */
  _.transformLesId = () => {
    liveEvent = liveEvent.replace('v2_', '');
    const regex = /([\d]{4}_[\d]{2}_)/;
    liveEvent = liveEvent.replace(regex, '');
  };

  /**
   * Get the total of height of the element
   *
   * @param {object} element
   * @returns {number}
  */
  _.getTotalHeight = (element) => {
    const elementStyle = window.getComputedStyle(element);
    return parseFloat(elementStyle.marginBottom) + parseFloat(elementStyle.marginTop) + element.offsetHeight;
  };

  /**
   * Get the height of the header
   *
   * @returns {number}
  */
  _.getHeaderHeight = () => {
    const MenuPrincipal = document.getElementById('menuPrincipalPortada');
    let headerHeight = MenuPrincipal ? _.getTotalHeight(MenuPrincipal) : 0;
    const scoreVisible = document.querySelector('body.fixed-cpr');

    if (scoreVisible) {
      const scoreElement = document.querySelector('.art-live-header');
      const scoreHeight = scoreElement ? _.getTotalHeight(scoreElement) : 0;

      const headerVisible = document.querySelector('body.fixed-cpr.show-main-nav');

      if (headerVisible) {
        headerHeight += scoreHeight;
      } else {
        headerHeight = scoreHeight;
      }
    }
    return headerHeight;
  };

  /**
   * Set scroll offset
   *
  */
  _.setScrollOffset = (element) => {
    const secondElement = document.querySelector('.stream-ev-wr>.ev-unit:nth-child(2)');

    if (secondElement) {
      const headerHeight = _.getHeaderHeight();
      const elementHeight = _.getTotalHeight(element);
      const secondElementOffset = secondElement.getBoundingClientRect().top;

      if ((secondElementOffset - headerHeight) < 0) {
        _.setAutoScrolled();
        window.scrollTo(0, window.pageYOffset + elementHeight);
      }
    }
  };

  /**
   * Set the last messageCard timestamp
   *
   * @param {number} timestamp
  */
  _.setLatestUpdate = (timestamp) => {
    latestUpdate = timestamp;
    params.fromDate = latestUpdate;
  };

  /**
   * Get the correct abbreviation of timeZone
   *
   * @param {string} value
  */
  _.getTimezoneByTimezone = (value) => {
    switch (value) {
      case 'America/Argentina/Buenos_Aires':
        return {
          'GMT-3': 'ART',
        };
      case 'America/Sao_Paulo':
        return {
          'GMT-3': 'BRT',
          'GMT-2': 'BRST',
        };
      case 'America/Santiago':
        return {
          'GMT-3': 'CLST',
          'GMT-4': 'CLT',
        };
      case 'America/Bogota':
        return {
          'GMT-5': 'COT',
        };
      case 'America/Lima':
        return {
          'GMT-5': 'PET',
        };
      case 'America/New_York':
        return {
          'GMT-4': 'EDT',
          'GMT-5': 'EST',
          EDT: 'EDT',
          EST: 'EST',
        };
      case 'America/Mexico_City':
        return {
          'GMT-5': 'CDT',
          'GMT-6': 'CST',
          CDT: 'CDT',
          CST: 'CST',
        };
      default:
        return {
          'GMT+1': 'CET',
          'GMT+2': 'CEST',
        };
    }
  };

  /**
   * Function to convert date
   *
   * @param {number} timestamp
  */
  _.updateDate = (timestamp) => {
    const months = ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto',
      'septiembre', 'octubre', 'noviembre', 'diciembre'];
    const monthsEn = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
      'September', 'October', 'November', 'December'];
    const timeZone = _.getTimezoneByTimezone(timezone);
    const gmtTimeZone = new Date(timestamp).toLocaleTimeString('en-US', { timeZone: timezone, timeZoneName: 'short' }).split(' ')[2];
    const abbrTimeZone = timeZone[gmtTimeZone] || '';
    const updatedTime = new Date(timestamp).toLocaleString('en-US', { timeZone: timezone });
    const newTime = new Date(updatedTime);
    const year = newTime.getFullYear();
    const month = edition === 'diarioas-en' ? monthsEn[newTime.getMonth()] : months[newTime.getMonth()];
    const day = newTime.getDate();
    const hour = (newTime.getHours() < 10 ? '0' : '') + newTime.getHours();
    const minutes = (newTime.getMinutes() < 10 ? '0' : '') + newTime.getMinutes();
    const formattedDate = ` ${day} de ${month} de ${year}`;
    const formattedDateEn = ` ${month} ${day}th, ${year}`;
    const formattedTime = `${hour}:${minutes} ${abbrTimeZone}`;

    const dateElement = document.querySelector('.art__by__date time');
    if (dateElement) {
      if (dateElement.childNodes.length === 1) {
        dateElement.childNodes[0].nodeValue = `${edition === 'diarioas-en' ? formattedDateEn : formattedDate} ${formattedTime} `;
      }
    }
  };

  /**
   * Get the element is pinned
   *
  */
  _.obtainPinned = () => {
    return document.querySelector('.ev-pinned');
  };

  /**
   * Updated the pinned element DOM
   *
   * @param {object} data
  */
  _.updatePinned = (data) => {
    const currentPinned = _.obtainPinned();
    // If exist a pinned message
    pinned = _.createElement(data);
    if (currentPinned) {
      currentPinned.parentNode.replaceChild(
        pinned,
        currentPinned
      );
    } else {
      const first = document.querySelector('.stream-ev-wr>.ev-unit:not(.ev-pinned)');
      first.parentNode.insertBefore(pinned, first);
    }
    this.pushExternalLib(pinned);
  };

  /**
   * Check is a empty array
   *
   * @param {array} array
  */
  _.isEmptyArray = (array) => {
    return Array.isArray(array) && !array.length;
  };

  /**
   * Check updated time of the messageCard
   *
   * @param {object} data
  */
  _.checkUpdatedData = (data) => {
    if (data && !_.isEmptyArray(data)) {
      if (data[0].date && (data[0].date !== latestUpdate)) {
        _.setLatestUpdate(data[0].date);
      }
      if (data[0].pinned) {
        // If the case when have two messages one pinned and another normal
        if (typeof data[1] !== 'undefined' && data[1].date > latestUpdate) {
          _.setLatestUpdate(data[1].date);
        }
      }
      return true;
    }
    return false;
  };

  /**
   * Set external library push the lib les-lazy-embed a new messageCard and
   * change the url link in the lib les-share-button
   *
   * @param {object} element
  */
  _.pushExternalLib = (element) => {
    // Add array to check is a embed post
    window.lesLazy.pushElement(element);
    // Change url share button
    window.lesShareButton.externalChangeUrl(element);
  };

  /**
   * Updated DOM of narration
   *
   * @param {object} data
  */
  _.updateNarration = (data) => {
    const first = document.querySelector('.stream-ev-wr>.ev-unit:not(.ev-pinned)');
    const message = document.getElementById('stream-panel-message');

    let changes = false;
    Object.keys(data).forEach((key) => {
      changes = true;
      if (data[key].pinned) {
        _.updatePinned(data[key].content_html);
      } else {
        message.setAttribute('href', `#${data[key].date}`);
        const element = _.createElement(data[key].content_html);

        first.parentNode.insertBefore(element, first);
        _.setScrollOffset(element);

        this.pushExternalLib(element);
      }
    });

    if (changes) {
      _.updateAds();
      _.trackerEvent();
      document.body.classList.add('stream-updated');
    } else {
      document.body.classList.remove('stream-updated');
    }
  };

  /**
   * Updated the add of the narration DOM
   *
  */
  _.updateAds = () => {
    if (typeof window.PBS !== 'undefined') {
      const position = pinned ? 2 : 1;
      window.PBS.fn.requestAdOnChain(position);
    }
  };

  /**
   * Set DTM event
   *
  */
  _.trackerEvent = () => {
    if (typeof window.DTM !== 'undefined') {
      // Add event When have the name of the event
      // window.DTM.trackEvent(window.DTM.events.LIVEREFRESH);
    }
  };

  /**
   * Create at element DOM
   *
   * @param {string} htmlString
  */
  _.createElement = (htmlString) => {
    const element = document.createElement('div');
    element.innerHTML = htmlString;
    return element.children[0];
  };

  /**
   * Start the interval of the narration refresh every 60 seconds
   *
  */
  _.start = () => {
    if (_.checkEndtime()) {
      return;
    }
    interval = setInterval(() => {
      ajax.get(
        endpoint,
        _.getQueryString(params),
        (data) => {
          const json = JSON.parse(data);
          let lesData = null;
          let updateData = false;
          if (_.checkEndtime()) {
            _.stop();
          }
          ({ data: lesData = [{}] } = json || {});
          if (_.checkUpdatedData(lesData)) {
            updateData = true;
          }
          if (updateData) {
            _.updateNarration(lesData);
            _.updateDate(latestUpdate);
          }
        },
        () => {
          // Manage Errors
        }, false
      );
    }, delay);
  };

  /**
   * Stop the interval of the narration
   *
  */
  _.stop = () => {
    clearInterval(interval);
  };

  /**
   * Function to make params on the url endpoint
   *
   * @param {object} obj
  */
  _.getQueryString = (obj) => {
    return Object.keys(obj)
      .reduce((a, k) => {
        if (obj[k] !== null) {
          a.push(`${k}=${encodeURIComponent(obj[k])}`);
        }
        return a;
      }, [])
      .join('&');
  };

  _.init();
}

const infoExternalLes = document.getElementById('externalDataLes');
if (infoExternalLes) {
  (new LiveReloader()).start();
}