import ModulePackageInfo from '../package.json';
import type { InitParams } from './types';
import './index.css';

const isClosed = localStorage.getItem(`${ModulePackageInfo.name}`);

function createPopUp(params: InitParams) {
  const wrapper = document.createElement('div');
  wrapper.id = 'one-button-wrapper';
  wrapper.classList.add(
    `pc-${params.direction?.pc}` || 'pc-cb',
    `m-${params.direction?.m}` || 'm-b'
  );
  wrapper.style.fontFamily = params.fontFamily || 'var(--font-base)';

  const popup = document.createElement('div');
  popup.id = 'one-button-block';
  popup.classList.add('animate');
  popup.style.boxShadow = `0 0.15rem 5px 0 ${params.colors.accent}`;
  popup.style.backgroundColor = params.colors.background;
  popup.style.border = `${params.colors.accent} 1px solid`;

  const text = document.createElement('p');
  if (Array.isArray(params.baseText)) {
    params.baseText.forEach((span) => {
      const spanEl = document.createElement('span');
      spanEl.textContent = span;
      text.appendChild(spanEl);
    });
  } else text.textContent = params.baseText;
  text.style.color = params.colors.text;

  const link = document.createElement('a');
  link.textContent = params.linkText;
  link.href = params.linkHref;
  link.addEventListener('click', () => togglePopUp(wrapper, popup, 'hide'));
  link.style.color = params.colors.background;
  link.style.backgroundColor = params.colors.accent;

  const close = document.createElement('button');
  close.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="${params.colors.accent}" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 5L5 19M5 5l14 14" color="${params.colors.accent}"/></svg>`;
  close.addEventListener('click', () => {
    localStorage.setItem(ModulePackageInfo.name, 'true');
    togglePopUp(wrapper, popup, 'hide');
  });
  close.style.backgroundColor = params.colors.background;
  close.classList.add('animate');

  // Создаю структуру
  popup.appendChild(close);
  popup.appendChild(text);
  popup.appendChild(link);
  wrapper.appendChild(popup);
  document.documentElement.appendChild(wrapper);

  return { wrapper, popup, link, close };
}

function togglePopUp(
  wrapper: HTMLElement,
  popUp: HTMLElement,
  forse: 'show' | 'hide'
) {
  if (isClosed) return;
  switch (forse) {
    case 'show':
      wrapper.classList.add('visible');
      popUp.style.pointerEvents = 'all';
      break;
    case 'hide':
      wrapper.classList.remove('visible');
      popUp.style.pointerEvents = 'none';
      break;
  }
}

function popUpObserve(
  observeTarget: string,
  wrapper: HTMLElement,
  popup: HTMLElement,
  once?: boolean
) {
  const target = document.querySelector<HTMLElement>(observeTarget);
  if (!target) {
    wrapper.style.display = 'none';
    return;
  }

  const Observer = new IntersectionObserver(
    (ent, obs) => {
      ent.forEach((e) => {
        if (isClosed)
          return obs.disconnect(), togglePopUp(wrapper, popup, 'hide');

        if (e.isIntersecting) togglePopUp(wrapper, popup, 'show');
        else togglePopUp(wrapper, popup, 'hide');

        if (once) obs.disconnect();
      });
    },
    { rootMargin: '-20% 0px -20% 0px' }
  );

  Observer.observe(target);
}

/**
 * Инициализация попапа
 * @param baseText - Основной текст
 * @param linkText - Текст ссылки
 * @param linkHref - Ссылка
 * @param observeTarget - Класс (путь) элемента, при появлении которого сработает попап
 */
export default function Init(params: InitParams) {
  if (isClosed) return;

  const consoleStyle = `
    background: #264653;
    color: #fefae0;
    display: inline-block;
    border-radius: 4px;
    padding: 4px 16px;
    margin: 4px;
    font-weight: 600;
    font-size: 1.15rem;
    font-family: 'Courier New', Tahoma, Geneva, Verdana, sans-serif;
  `;

  try {
    const popUp = createPopUp(params);
    if (params.observeTarget)
      popUpObserve(
        params.observeTarget,
        popUp.wrapper,
        popUp.popup,
        params.observeOnce
      );
    else
      window.addEventListener('load', () =>
        togglePopUp(popUp.wrapper, popUp.popup, 'show')
      );

    console.log(
      `%c[👍] ${ModulePackageInfo.name} v${ModulePackageInfo.version}`,
      consoleStyle
    );
  } catch (e) {
    console.log(
      `%[👎] ${ModulePackageInfo.name}`,
      consoleStyle + 'background: #A20021; color: #fff;'
    );
    console.warn(e);
  }
}