class VideoSquare {
   /**
    *
    * @param {HTMLElement} field
    */
   constructor(field) {
      this.field = field;

      if (field && field.classList.contains("has-video")) {
         this.init();
      }
   }

   init() {
      const trigger = this.field.querySelector(".case-gallery__video-play");
      const preview = this.field.querySelector(".case-gallery__video-preview");

      trigger.addEventListener("click", () => {
         const link = trigger.dataset.link;
         trigger.remove();

         const splittedLink = link.split(".ru/video");
         const videoData = splittedLink[1];

         const ids = videoData.split("_");

         const oid = ids[0];
         const id = ids[1];

         let test = `
         <iframe src="https://vkvideo.ru/video_ext.php?oid=${oid}&id=${id}&hd=4&autoplay=1" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>
         `;

         preview.innerHTML = test;
         preview.classList.add("active");
      });
   }
}

export { VideoSquare };
