import { formatDate } from '../../utils/date/dateFormater.ts';
import { clickOnFader, keyDownEscape } from '../../scripts/click-on-fader.ts';

type PopupWebinar = (
  document: ShadowRoot,
  onOpen: () => void,
  onClose: () => void,
  onError?: () => void,
) => void;
export const popupWebinar: PopupWebinar = (document, onOpen, onClose, onError) => {
  const initPopup = async () => {
    const lang = localStorage.getItem('form__lang') || 'en';
    let popupDataResponse = null;

    popupDataResponse = await fetch(
      `${import.meta.env.VITE_WP_URL}/wp-json/api/v2/popup/webinar?lang=${lang}`,
      {
        method: 'GET',
        headers: {
          'content-type': 'Application/json',
        },
      },
    ).catch((error) => {
      if (onError) {
        onError();
      }
      console.error('Error showing popup:', error);
    });

    if (!popupDataResponse) {
      throw new Error('Error fetching popup data');
    }

    if (!popupDataResponse || !popupDataResponse.ok) {
      if (onError) {
        onError();
      }
      return;
    }

    const responseData = popupDataResponse.ok ? await popupDataResponse.json() : undefined;
    if (!responseData) return false;

    const exitButton = document.querySelector('.popupWebinar__close');
    const title = document.querySelector('.popupWebinar__title');
    const subtitle = document.querySelector('.popupWebinar__description');
    const text = document.querySelector('.popupWebinar__text');
    const bullets = document.querySelector('.popupWebinar__bullets');
    const date = document.querySelector('.popupWebinar__date');
    const time = document.querySelector('.popupWebinar__time');
    const button: HTMLButtonElement | null = document.querySelector('.popupWebinar__button');
    const { keyOpen, keyClose } = keyDownEscape(onClose);

    const { preparedDate, preparedTime } = formatDate(responseData.date, lang);

    if (title) {
      title.innerHTML = responseData.title ?? 'Title';
    }
    if (subtitle) {
      subtitle.innerHTML = responseData.subtitle ?? 'Sub Title';
    }
    if (text) {
      text.innerHTML = responseData.text ?? 'Text';
    }
    if (bullets) {
      bullets.innerHTML =
        responseData.bullets
          .map((bullet: { text: string }) => {
            return `<li class="popupWebinar__bullet">${bullet.text}</li>`;
          })
          .join('') ?? '';
    }
    if (date) {
      date.innerHTML = `${preparedDate}`;
    }
    if (time) {
      time.innerHTML = `${preparedTime}`;
    }
    if (button) {
      button.innerText = responseData.buttonText ?? 'Button';
      button?.setAttribute('href', responseData.buttonLink ?? '#');
    }
    onOpen();
    keyOpen();

    exitButton?.addEventListener('click', () => {
      onClose();
      keyClose();
    });
    button?.addEventListener('click', () => {
      onClose();
      keyClose();
    });

    clickOnFader(document, () => {
      onClose();
      keyClose();
    });
  };
  initPopup();
};