import { buildLaunchContainer, buildRefinedPage } from './templates';
import './style.css';

const run = async () => {
  const $ = (selector) => document.querySelector(selector);
  const fetchParam = (name) => {
    const param = window.location.search
      .substr(1)
      .split('&')
      .map((param) => param.split('='))
      .find((param) => param[0] === name);
    return param ? param[1] : undefined;
  };

  const refinePage = (page) => ($('html').innerHTML = page);

  const videoId = fetchParam('v');
  const refineImmediately = fetchParam('refined') ? true : false;

  if (videoId !== undefined) {
    if (refineImmediately) {
      refinePage(buildRefinedPage(videoId));
    } else {
      const launchContainer = document.createElement('div');
      launchContainer.innerHTML = buildLaunchContainer(videoId);
      document.body.append(launchContainer);

      const launchButton = $('#refined-youtube-launch-button');
      const launchCloseButton = $('#refined-youtube-launch-close-button');

      launchButton.addEventListener('click', () =>
        refinePage(buildRefinedPage(videoId))
      );
      launchCloseButton.addEventListener('click', () => {
        const launchContainer = $('#refined-youtube-launch-container');
        launchContainer.style.opacity = 0;
        setTimeout(() => {
          launchContainer.remove();
        }, 1000);
      });
    }
  }
};

run();