import {videoControls, videoInline} from "/mx/includes/internal/video-module/customVideo.js"


//Video
const videoContainer = document.querySelector('[custom-video-controls]')
let controlVideo = new videoControls(videoContainer.id, {type:'in'});
const video = videoContainer.querySelector('video')
controlVideo.playVideo()
let modalOpen;

const button = document.querySelector('#soip-modal');

function videoStop(){
    if(!video.paused){
        controlVideo.fireEvent(controlVideo.events.STATECHANGE)
    }
}

const mutObsMex = new MutationObserver(function (mutations) {
    mutations.forEach(mutation => {
        if (mutation.type === "attributes" && mutation.attributeName === "class") {
            if(!modalOpen.classList.contains("modal-open")){
                videoStop();
            }else{
                modalOpen.querySelector('.modal-overlay').setAttribute('aria-label', 'Ventana')
            }
        }
    });
});

button.addEventListener("click", setObs);
function setObs(){
    modalOpen = document.querySelector('.modal.advanced-cameras');
    if(modalOpen){
        mutObsMex.observe(modalOpen, {
            attributes: true
        });
        button.removeEventListener("click", setObs);
    }
}

//DM-HP
document.addEventListener('DOMContentLoaded', function() {
    if(window.location.href.indexOf('#soip-movie') != -1) {
        setTimeout(()=>{
            const openBt = document.querySelector('#trigger-mm-modal')
            if(openBt){
                openBt.click();
                let modalMovie = document.querySelector('#mm-video video')
                document.querySelector('#mm-video-movie video').src = modalMovie.getAttribute('data-inline-media-basepath')
                document.querySelector('#mm-video-movie').setAttribute('data-landing','')
                document.querySelector('#mm-video-movie video').play()
            }
        },2000)
    }
    else if(window.location.href.indexOf('#soip-discover') != -1) {
        setTimeout(()=>{
            const openBt = document.querySelector("#modal-soip-mm")
            if(openBt){
                openBt.click();
            }
        },2000)
    }
});


//movie end
const movieOpen = document.querySelector('#soip-movie');
movieOpen.addEventListener('click', e => {
    let endState = document.querySelector('.end-state-link');
    endState.addEventListener('click', movieRoute)
    this.closest(".modal-overlay").querySelector(".modal-close-button").addEventListener('click', e => {
        endState.removeEventListener('click', movieRoute)
    })
})

function movieRoute(){
    const btn1 = this.closest(".modal-overlay").querySelector(".modal-close-button")
    const btn2 = document.querySelector("#modal-soip-mm")
    btn1.click();
    btn2.click();
}



//Front card video intro
const videoIntro = document.querySelector('[video-controls-card-intro]')
const videoLoop = document.querySelector('[video-controls-card-loop]')
const videoLoopAltContainer = document.querySelector('[video-controls-card-loop-alt]')
let videoLoopc = new videoInline(videoLoop.id,{type:'op'});
let videoLoopalt = new videoInline(videoLoopAltContainer.id,{type:'op'});
videoLoopc.playVideo();
videoLoopalt.playVideo();
let elmStyles = getComputedStyle(videoIntro.querySelector('video'));

if(elmStyles.display != 'none'){
    videoLoop.style.display = 'none';
    let videoCard = new videoInline(videoIntro.id, {type:'op'});

    videoCard.playVideo()
    let promise = videoCard.video.play();
    
    if (promise !== undefined) {
    promise
        .catch(error => {
        // Auto-play was prevented
        if (error.name === "NotAllowedError") {
                document.getElementById('soip-suerte-banner-video').style.display = 'none'
            }
        })
        .then(() => {
            // if there is no error, then we play the video
            videoCard.video.play();
            });
    } 

    videoCard.video.addEventListener('ended', e => {
        videoIntro.style.display = 'none';
        videoLoop.style.display = 'block';
        playButton.classList.remove('hide-controls')
    })
}


// Controls

const playButton = videoLoop.querySelector('.play-pause-button')
const playButtonClo =videoLoopAltContainer.querySelector('.play-pause-button')
const sufix = 'soip suerte animation'
playButton.addEventListener('click', e => {stateChange(videoLoopc.video, videoLoop)})
playButtonClo.addEventListener('click', e => {stateChange(videoLoopalt.video,videoLoopAltContainer)})

function stateChange(video, cont){
    let prefix;
    if(video.paused){
        prefix = 'pause'
        cont.querySelector('.ac-video-player').classList.add('playing')
        cont.querySelector('.ac-video-player').classList.remove('paused')
        video.play()
    }else{
        cont.querySelector('.ac-video-player').classList.remove('playing')
        cont.querySelector('.ac-video-player').classList.add('paused')
        video.pause()
        prefix = 'play'
    }
    playButton.setAttribute('aria-label',`${prefix == 'play' ? 'Reproducir':'Pausar'} animación soip`)
    playButton.setAttribute('data-analytics-title',`${prefix} | ${sufix}`)
    playButton.setAttribute('data-analytics-click',`prop3:${prefix} | ${sufix}`)
}

function onPlay(e){
    let prefix = 'pause'

    e.target.parentElement.classList.add('playing')
    e.target.parentElement.classList.remove('paused')
    let control = e.target.parentElement.querySelector('.play-pause-button')
    control.setAttribute('aria-label',`${prefix == 'play' ? 'Reproducir':'Pausar'} animación soip`)
    control.setAttribute('data-analytics-title',`${prefix} | ${sufix}`)
    control.setAttribute('data-analytics-click',`prop3:${prefix} | ${sufix}`)
}

videoLoopc.video.addEventListener('play', onPlay)
videoLoopalt.video.addEventListener('play', onPlay)