// var CSS_HREF_URL = '/Users/masahiroebe/dev/apollo/onelink/assembly/src/script/assets/style/showbase.css';
      var CSS_HREF_URL = 'https://d2nf8n3ydlqpzi.cloudfront.net/assembly/assets/style/showbase.css';
      var ANALYSIS_API_BASE = 'https://7jpp687jpd.ap-northeast-1.awsapprunner.com';
      var VISITER_ID_LOCALSTORAGE_KEY = 'showbase-visiter-id';
      var accountId = 'apollohr'
    
      var data = {
        video: {
          source: 'https://d2nf8n3ydlqpzi.cloudfront.net/short-demo/soloban/video/soloban-lp.mp4',
          maxHeight: 120,
          maxWidth: 120,
          position: 'bottom-left',
          conditions: {
            popupTimer: null,
            popupScrollHeight: null,
            popupScrollPercentage: 20,
            popupTurnBack: true,
          },
        },
        cta: {
          source: 'https://d2nf8n3ydlqpzi.cloudfront.net/short-demo/soloban/img/soloban-cta.png',
          conversion: 'https://apollohr.co.jp/contact/',
          maxHeight: 120,
          maxWidth: null,
          position: 'bottom-left',
          conditions: {
            popupTimer: null,
            popupScrollHeight: null,
            popupScrollPercentage: 20,
            popupTurnBack: true,
          },
        },
      };
  ////////////////////////////////////
///            HANDLER           ///
////////////////////////////////////

var isClosed = false;
var isForceClosed = false;
var isDisplayed = false;

function handleVideoOff() {
  document.getElementById('showbaseCloseButton').style.display = 'none';
  document.getElementById('showbaseVideo').style.display = 'none';
  document.getElementById('showbaseSignature').style.display = 'none';
  isDisplayed = false;
}

function handleVideoOn() {
  if (!isClosed) {
    document.getElementById('showbaseVideo').style.display = 'block';
    isDisplayed = true;
  }
}

function handleUIOn() {
  if (!isClosed) {
    document.getElementById('showbaseCloseButton').style.display = 'block';
    document.getElementById('showbaseSignature').style.display = 'block';
    isDisplayed = true;
  }
}

function handleUIOff() {
  document.getElementById('showbaseCloseButton').style.display = 'none';
  document.getElementById('showbaseSignature').style.display = 'none';
  isClosed = true;
}

function handleCTAOff() {
  document.getElementById('showbaseCTA').style.display = 'none';
  isClosed = true;
}

function handleCTAOn() {
  if (!isClosed) {
    document.getElementById('showbaseCTA').style.display = 'block';
  }
}

function handleAllOff() {
  handleVideoOff();
  handleCTAOff();
  isClosed = true;
  isForceClosed = true;
  isDisplayed = false;
}

var windowHeight = 0;
var windowWidth = 0;
var popupHeight = 250;

function setPopupHeight() {
  windowHeight = window.outerHeight; //innerHeight is always zero.
  windowWidth = window.outerWidth; //innerWidth is always zero.

  if (windowWidth >= windowHeight) {
    popupHeight = Math.floor(windowHeight / 5);
  } else {
    popupHeight = Math.floor(windowWidth / 3);
  }

  if (popupHeight > 250) {
    popupHeight = 250;
  }
}

////////////////////////////////////
///              CSS             ///
////////////////////////////////////

function insertCSSLink() {
  var css = `<link rel="stylesheet" href="${CSS_HREF_URL}">`;
  document.head.insertAdjacentHTML('beforeend', css);
}

////////////////////////////////////
///              UI              ///
////////////////////////////////////

function insertUIHTML() {
  var html = `
  <div
    id="showbaseCloseButton"
    class="slideInAnimation"
    style="display: none; bottom: ${
      (data.video.maxHeight
        ? data.video.maxHeight
        : data.cta.maxHeight
        ? data.cta.maxHeight
        : 0) + 26
    }px;"
    onclick="handleAllOff()"
  >
    X
  </div>
  <div
    id="showbaseSignature"
    class="slideInAnimation"
    style="display: none;"
  >
    <a href="https://apollohr.co.jp/" target="_blank">
      Powerd by Showbase
    </a>
  </div>
  `;
  document.body.insertAdjacentHTML('beforeend', html);
}

////////////////////////////////////
///             POPUP            ///
////////////////////////////////////

function insertVideoHTML() {
  var html = `
  <div
    id="showbaseVideo"
    class="slideInAnimation"
    style="display: none;"
  >
    <video
      src="${data.video.source}"
      style="max-height: ${
        data.video.maxHeight ? `${data.video.maxHeight}px` : '100%'
      }; max-width: ${
    data.video.maxWidth ? `${data.video.maxWidth}px` : '100%'
  };"
      controls
      disablePictureInPicture
      playsinline>
    </video>
  </div>
  `;
  document.body.insertAdjacentHTML('beforeend', html);
}

////////////////////////////////////
///              CTA             ///
////////////////////////////////////

function insertCTAHTML() {
  var left;
  if (data.video.source === 'undefined') {
    left = 16;
  } else {
    left = data.video.maxWidth + 26;
  }
  var html = `
  <div
    id="showbaseCTA"
    class="slideInAnimation"
    style="display: none; left: ${left}px;"
    onClick="handleCTAClicked()"
  >
    <img
      src="${data.cta.source}"
      style="max-height: ${
        data.cta.maxHeight ? `${data.cta.maxHeight}px` : '100%'
      }; max-width: ${
    data.cta.maxWidth ? `${data.cta.maxWidth}px` : '100%'
  }; vertical-align: baseline;"
    />
  </div>
  `;
  document.body.insertAdjacentHTML('beforeend', html);
}

////////////////////////////////////
///           CONDITION          ///
////////////////////////////////////

function getScrollHeight() {
  var scrollHeight = Math.floor(window.scrollY);
  return scrollHeight;
}

var maxScrollHeight = 0;
function getMaxScrollHeight() {
  var scrollHeight = getScrollHeight();
  if (maxScrollHeight < scrollHeight) {
    maxScrollHeight = scrollHeight;
  }
  return maxScrollHeight;
}

function getScrollPercentage() {
  var documentHeight = document.documentElement.scrollHeight;
  var viweHeight = document.documentElement.clientHeight;
  var scrollPercentage = Math.floor(
    (window.scrollY / (documentHeight - viweHeight)) * 100,
  );
  return scrollPercentage;
}

var maxScrollPercentage = 0;
function getMaxScrollPercentage() {
  var scrollPercentage = getScrollPercentage();
  if (maxScrollPercentage < scrollPercentage) {
    maxScrollPercentage = scrollPercentage;
  }
  return maxScrollPercentage;
}

var backThreshold = 300;
var isTurnBack = false;
function getIsTurnBack() {
  if (getMaxScrollHeight() - getScrollHeight() > backThreshold) {
    isTurnBack = true;
  }
  return isTurnBack;
}

////////////////////////////////////
///           REPOSITORY         ///
////////////////////////////////////

function getRandomId() {
  return Math.random().toString(16).substring(2, 14);
}

function getVisiterId(onloadTimestamp) {
  var visiterId = window.localStorage.getItem(VISITER_ID_LOCALSTORAGE_KEY);

  if (!visiterId) {
    visiterId = `${accountId}#${onloadTimestamp
      .toISOString()
      .substring(0, 10)}#${getRandomId()}`;
    window.localStorage.setItem(VISITER_ID_LOCALSTORAGE_KEY, visiterId);
  }

  return visiterId;
}

function getSessionId(onloadTimestamp) {
  var sessionId = `${accountId}#${onloadTimestamp
    .toISOString()
    .substring(0, 19)}#${getRandomId()}`;

  return sessionId;
}

var maxVideoViewSeconds = 0;
var maxVideoViewPercentage = 0;

var log;
async function popupLogRepository(onloadTimestamp) {
  log = {
    account_id: accountId,
    session_id: getSessionId(onloadTimestamp),
    visiter_id: getVisiterId(onloadTimestamp),
    hostname: window.location.hostname ? window.location.hostname : 'localhost',
    pathname: window.location.pathname,
    user_agent: window.navigator.userAgent,
    landed_at: onloadTimestamp.toISOString(),
    duration: new Date() - onloadTimestamp,
    max_scroll_height: getMaxScrollHeight(),
    max_scroll_percentage: getMaxScrollPercentage(),
    max_video_view_seconds: maxVideoViewSeconds,
    max_video_view_percentage: maxVideoViewPercentage,
    popup_height: popupHeight,
    is_cta_clicked: isCTAClicked,
    is_closed: isForceClosed,
    is_displayed: isDisplayed,
  };

  const response = await fetch(`${ANALYSIS_API_BASE}/popup/`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(log),
  });

  return response.json();
}

////////////////////////////////////
///              CTA             ///
////////////////////////////////////

var isCTAClicked = false;
async function handleCTAClicked() {
  isCTAClicked = true;
  await popupLogRepository(onloadTimestamp);
  window.location.href = data.cta.conversion;
  handleUIOff();
  handleCTAOff();
}

////////////////////////////////////
///              MAIN            ///
////////////////////////////////////

var onloadTimestamp = new Date();
// window.onload = async function () {
insertCSSLink();
setPopupHeight();
insertUIHTML();
insertVideoHTML();
insertCTAHTML();

onloadTimestamp = new Date();

window.addEventListener('scroll', function () {
  // Video
  if (
    data.video.conditions.popupScrollHeight !== null &&
    data.video.conditions.popupScrollHeight !== undefined &&
    getScrollHeight() >= data.video.conditions.popupScrollHeight
  ) {
    handleVideoOn();
    handleUIOn();
  }

  if (
    data.video.conditions.popupScrollPercentage !== null &&
    data.video.conditions.popupScrollPercentage !== undefined &&
    getMaxScrollPercentage() >= data.video.conditions.popupScrollPercentage
  ) {
    handleVideoOn();
    handleUIOn();
  }

  if (
    data.video.conditions.popupTurnBack !== null &&
    data.video.conditions.popupTurnBack !== undefined &&
    data.video.conditions.popupTurnBack &&
    getIsTurnBack()
  ) {
    handleVideoOn();
    handleUIOn();
  }

  // CTA
  if (
    data.cta.conditions.popupScrollHeight !== null &&
    data.cta.conditions.popupScrollHeight !== undefined &&
    getScrollHeight() >= data.cta.conditions.popupScrollHeight
  ) {
    handleCTAOn();
    handleUIOn();
  }

  if (
    data.cta.conditions.popupScrollPercentage !== null &&
    data.cta.conditions.popupScrollPercentage !== undefined &&
    getMaxScrollPercentage() >= data.cta.conditions.popupScrollPercentage
  ) {
    handleCTAOn();
    handleUIOn();
  }

  if (data.cta.conditions.popupTurnBack && getIsTurnBack()) {
    handleCTAOn();
    handleUIOn();
  }
});

setTimeout(function () {
  if (
    data.video.conditions.popupTimer !== null &&
    data.video.conditions.popupTimer !== undefined
  ) {
    handleVideoOn();
    handleUIOn();
  }
}, data.video.conditions.popupTimer * 1000);

setTimeout(function () {
  if (
    data.cta.conditions.popupTimer !== null &&
    data.cta.conditions.popupTimer !== undefined
  ) {
    handleCTAOn();
    handleUIOn();
  }
}, data.cta.conditions.popupTimer * 1000);

window.addEventListener(`blur`, () => {
  popupLogRepository(onloadTimestamp);

  if (data.video.conditions.popupTurnBack) {
    handleVideoOn();
    handleUIOn();
  }

  if (data.cta.conditions.popupTurnBack) {
    handleCTAOn();
    handleUIOn();
  }
});

window.addEventListener(`focus`, () => {
  onloadTimestamp = new Date();
  isClosed = false;
  isCTAClicked = false;
  maxScrollPercentage = 0;
});

const video = document.querySelector('video');

if (video) {
  video.addEventListener('timeupdate', (event) => {
    var videoViewSeconds = Math.round(video.currentTime * 10) / 10;
    if (maxVideoViewSeconds < videoViewSeconds) {
      maxVideoViewSeconds = videoViewSeconds;
    }

    var videoViewPercentage = Math.round(
      (video.currentTime / video.duration) * 100,
    );
    if (maxVideoViewPercentage < videoViewPercentage) {
      maxVideoViewPercentage = videoViewPercentage;
    }
  });
  // }
}