let swiperInstagram = ''

$(document).ready(function () {
    getIdVideosTikTok()
    const instagramId = $('.contenedor-instagram').attr('data-instagramId')
    const instagramToken = $('.contenedor-instagram').attr('data-instagramToken')
    if(instagramId && instagramToken){
        const arrayFields  = 'id,media_type,media_url,permalink,thumbnail_url,timestamp,caption,username,children{media_url,thumbnail_url},profile_pic';
        // https://graph.facebook.com/v15.0/{instagram_user_id}/media?fields=id,caption,media_type,media_url,permalink,timestamp&access_token={page_access_token}
        // test(instagramToken)
        // $.ajax({
        //     url: 'https://graph.instagram.com/' + instagramId + '/media',
        //     dataType: 'json',
        //     type: 'GET',
        //     data: {fields: arrayFields, access_token: instagramToken},
        //     success: function(data){
        //         // printUserDataInstagram(data.data)
        //         printInstagram(data.data)
        //         addAnimation()
        //         if(mobile699.matches){
        //             initSwiper()
        //         }
        //     },
        //     error: function(data){
        //         //console.log(data)
        //     }
        // })
    }
})

const printUserDataInstagram = (data) => {
    $('#nameInstagram').append(`@${data[0].username}`)
    $('#linkInstagram').attr('href', `https://www.instagram.com/${data[0].username}`)
}

const printInstagram = (data) => {
    const contenedorItems = $(".contenedor-instagram .contenedor-body .swiper-container .swiper-wrapper")
    contenedorItems.empty();
    let html = ''
    cantidad = 4
    num = 0
    data.map((item, index) => {
        if(num <= cantidad - 1){
            switch (item.media_type) {
                case "CAROUSEL_ALBUM":
                    html += htmlCarusel(item, index)
                    num++
                    break;
                case "IMAGE":
                    html += htmlImage(item, index)
                    num++
                    break;
                case "VIDEO":
                    html += htmlVideo(item, index)
                    num++
                    break;
                default:
                    break;
            }
        }
    })
    contenedorItems.append(html)
}

const htmlVideo = (item, index, clase = '') => (
    `<${(clase == '')?'a href="' + item.permalink + '" target="_blank"':'div'} class="${(clase == '')?'swiper-slide ':''}item${clase}">
        <video preload="metadata" data-keepplaying autoplay loop muted playsinline>
            <source src="${item.media_url}#t=0.01" type="video/mp4">
        </video>
    </${(clase == '')?'a':'div'}>`
)

const htmlImage = (item, index, clase = '') => (
    `<${(clase == '')?'a href="' + item.permalink + '" target="_blank"':'div'} class="${(clase == '')?'swiper-slide ':''}item${clase}">
        <img src="${item.media_url}" alt="">
    </${(clase == '')?'a':'div'}>`
)

const htmlCarusel = (item, index) => {
    html = ''
    html += '<a href="' + item.permalink + '" target="_blank" class="swiper-slide item">'
    html += '<div class="item-children-padre" style="width: '+item.children.data.length+'00%;">'
        if(item.children.data.length > 0){
            item.children.data.map((itemChildren, index2) => {
                if(itemChildren.media_url.split(".")[4].split("?")[0] == 'mp4'){
                    html += htmlVideo(itemChildren, index2, '-children')
                }else{
                    html += htmlImage(itemChildren, index2, '-children')
                }
            })
        }
    html +=  "</div>"
    html +=  "</a>"

    return html
}
const addAnimation = () => {
    $('.item-children-padre').each((index, item) => {
        var carruselAnimation = gsap.timeline({repeat: -1, yoyo: true, repeatDelay: 0.5});
        for(let i = 1; i<$(item)[0].children.length; i++){
            carruselAnimation.to(item, {
                x: '-='+($(item).width() / $(item)[0].children.length),
                duration: 4
            })
        }
    })
}

////////////////////////////////////////////////
/////////////////Video Play

$('#corazon').on('click', function(){
    playHeart()
})

const playHeart = () => {
    document.getElementById('video-corazon').play()
    $('#corazon').addClass('active')
}  


const initSwiper = () => {
    swiperInstagram = new Swiper('#swiper-instagram', {
        slidesPerView: 1,
        spaceBetween: 16,
    });
}

////////////////////////////////////////////////

////////////////////////////////////////////////
const getIdVideosTikTok = () => {
    let id = 0;
    let nickname = "";
    $('#swiper-tiktok .swiper-wrapper .item').each((index, item) => {
        id = $(item).attr('data-video').split('/')[5]
        id = id.substring(0,19)
        nickname = $(item).attr('data-video').split('/')[3]
        getVideosTiktok(id, item, nickname)
        // $('#nameTikTok').empty()
        // $('#nameTikTok').html(nickname)
        // $('#linkTikTok').attr('href', `https://www.tiktok.com/${nickname}`)
    })
    if(mobile699.matches){
        // initSwiperTikTok()
    }
}

const getVideosTiktok = (id, item, nickname) => {
    $.ajax({
        url: `https://www.tiktok.com/oembed?url=https://www.tiktok.com/${nickname}/video/${id}`,
        dataType: 'json',
        type: 'GET',
        success: function(data){
            $(item).html(data.html)
            // console.log(data)
        },
        error: function(data){
        //  console.log(data)
        }
    })
}

const initSwiperTikTok = () => {
    swiperTikTok = new Swiper('#swiper-tiktok', {
        slidesPerView: 1,
        spaceBetween: 16,
    });
}
////////////////////////////////////////////////

