Vue.component('articulo-detalles', {
    props: ['detalles'],
    template: `
    <div class="col-md-12">
        <article class="blog-post-wrapper container">
            <b-button variant="outline-primary m-1 mb-3">Regresar</b-button>
            <div class="row">            
                <div class="col-md-12 row">
                    <div class="col-md-6">
                        <div class="card-header">
                            <img class="img-fluid" :src="detalles.imagen" :alt="detalles.altImagen">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card-body-p container">
                            <h4 class="title-article">{{detalles.titulo}}</h4>
                            <span class="data-article">{{detalles.autor}} | {{detalles.fecha}}</span>
                            <p class="info-articlcxfe pt-1">{{detalles.contenido}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
    `
});

// const i18nn = new VueI18n({
//     locale: '',
//     fallbackLocale: ['fr', 'en'],
//     // messages
// });

var mixin = {
    data: function() {
        return {
            urlJson: '',
            txtregresar: null
        }
    },
    methods: {
        obtenerGeolocalizaion() {
            navlang = navigator.browserLanguage || navigator.language;
            //se obtiene solo "en" | "es"
            this.langnavi = navlang.substr(-20, 2);
            i18nn.locale = this.langnavi;

            this.cambiarVariables(this.langnavi);

        },
        getData() {
            axios.get(this.urlJson)
                .then(response => {
                    let data = [];
                    let obj = this;
                    // Filtro los datos por el producto
                    let arrResultado = response.data.filter(function(item) {
                        if (item.titulo == obj.nombreArticulo) {
                            obj.articulo = item;
                            obj.cambiarMetaTags(item);
                        }
                    });

                });
        },
        obtenerIdioma() {
            var langs = localStorage.getItem("idioma");
            if (langs == 'es') {
                i18n.locale = 'es';
                this.langnavi = 'es';
            } else if (langs == 'en') {
                i18n.locale = 'en';
                this.langnavi = 'en';
            }

            this.cambiarVariables(this.langnavi);
            this.cambiarIdiomaCategorias(this.langnavi);
        },
        guardarIdioma(idioma) {
            this.langstorage = idioma;
            i18n.locale = this.langstorage;
            localStorage.setItem("idioma", this.langstorage);
        },
        cambiarIdioma(idioma) {
            i18n.locale = idioma;
            this.cambiarVariables(idioma);
        },
        cambiarVariables(idioma) {
            if (idioma == 'es') {
                this.urlJson = './data/publicaciones.json';
                this.txtregresar = ' Regresar'
            } else if (idioma == 'en') {
                this.urlJson = './data/publicaciones-en.json';
                this.txtregresar = ' Go back'
            }
            this.getData();

        },
    },
    created() {

    }
}

// var select = new Vue({
//     mixins: [mixin],
//     el: '#idioma',
// });

var blog = new Vue({
    mixins: [mixin],
    el: '#articulo-blog',
    data: {
        nombreArticulo: null,
        articulo: [],
        url: null,
    },
    i18nn,
    langnavi: '',
    created() {
        this.nombreArticulo = this.obtenerArticulo('articulo');
        if (localStorage.getItem("idioma")) {
            this.obtenerIdioma();
        } else {
            this.obtenerGeolocalizaion();
        }
        this.getData();
    },
    methods: {
        obtenerArticulo(name) {
            name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
            let regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);

            results = decodeURIComponent(results[1].replace(/\+/g, " "));

            results = results.replace(/_/g, " ");

            return results === null ? "" : results;
        },
        regresar() {
            location.href = "blog";
        },
        compartirFacebook() {
            window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`, 'sharer', 'toolbar=0,status=0,width=548,height=325');
        },
        compartirTwitter() {
            window.open(`https://twitter.com/intent/tweet?text=Esta%20publicación%20de%20ITTEC%20es%20oro...&url=${this.url}`);
        },
        compartirWhatsapp() {

        },
        cambiarMetaTags(articulo) {

            console.log(articulo.metaTags);
            const urlImages = `https://www.ittec.mx/webQA/images/blog/${articulo.metaTags.meta_img}`;
            const url = `https://www.ittec.mx/webQA/articulo?articulo=${articulo.metaTags.meta_canonical}`;
            this.url = url;

            let meta_description = document.querySelector('#meta_description');
            let meta_keywords = document.querySelector('#meta_keywords');
            let meta_img = document.querySelector('#meta_img');
            let meta_canonical = document.querySelector('#meta_canonical');
            let og_title = document.querySelector('#og_title');
            let og_url = document.querySelector('#og_url');
            let og_description = document.querySelector('#og_description');
            let og_img = document.querySelector('#og_img');
            let twitter_url = document.querySelector('#twitter_url');
            let twitter_title = document.querySelector('#twitter_title');
            let twitter_description = document.querySelector('#twitter_description');
            let twitter_img = document.querySelector('#twitter_img');
            let twitter_alt = document.querySelector('#twitter_alt');

            // document.getElementsByTagName('meta')["description"].content = "My new page description!!";
            // document.title = "My new Document Title!!";

            // meta_description.setAttribute('content', articulo.metaTags.meta_description);
            // meta_keywords.setAttribute('content', articulo.metaTags.meta_keywords);
            // meta_img.setAttribute('href', urlImages);
            // meta_canonical.setAttribute('href', url);
            // og_title.setAttribute('content', articulo.metaTags.og_title);
            // og_url.setAttribute('content', url);
            // og_description.setAttribute('content', articulo.metaTags.meta_description);
            // og_img.setAttribute('href', urlImages);
            // twitter_url.setAttribute('content', url);
            // twitter_title.setAttribute('content', articulo.metaTags.og_title);
            // twitter_description.setAttribute('content', articulo.metaTags.meta_description);
            // twitter_img.setAttribute('content', urlImages);
            // twitter_alt.setAttribute('content', articulo.metaTags.twitter_alt);

            console.log(twitter_title);

            // if (red == 'facebook') {
            //     this.compartirFacebook(url);
            // } else if (red == 'twitter') {
            //     this.compartirTwitter(url);
            // } else if (red == 'whatsapp') {
            //     this.compartirWhatsapp(url);
            // }

        }
    }
});