import app from './../../js/app.js'
var tag = 'app-avatar';
app.init({tag});

var html = `
    <div>
        <button class="nav-profile w-inline-block w--current" :style="{ backgroundImage: 'url(' + imgSrc + ')', backgroundColor: this.bgColor }" @click="redirect">
        </button>
    </div>
`;

Vue.customElement(tag, {
    template: html,
    props: [
        'redirectUrl',
        'sessionKey',
        'objectId',
        'parseClass'
    ],
    data: () => ({
        t: {
            override: "",
        },
        store: app.store,
        imgSrc: '', 
		bgColor: '#FFF'
    }),
    methods: {
        init() {
            // Retrieve existing Parse Object based on parseClass and objectId/sessionKey provided as props
            const parseObject = Parse.Object.extend(this.parseClass);
            let query = new Parse.Query(parseObject);
            query.get(this.objectIdLocal)
                .then((item) => {
                    if (item.attributes.image) {
                        this.imgSrc = item.attributes.image.url()+'?w=80';
                    }else this.defaultImg()
                })
				.catch(this.defaultImg)
        },
		defaultImg(){
			this.bgColor = '#efefef';
			this.imgSrc = "https://assets.website-files.com/5dc3f0f96a906d57b4336cb9/5dd7e53fbe26702e3830a1bd_icon-user.svg"
		}, 
        redirect() {
            // Redirect if url was passed
            if (this.redirectUrl) {
                window.location.href = this.redirectUrl;
            }
        }
    },
    beforeMount() {
        app.extendFromDOM(this, this.override) // fix for vue's lack of dynamic props/html-attributes
    },
    mounted() {
        // Get objectId from session if there was no prop
        if (!this.objectId && this.sessionKey) {
            Parse.Session.current()
                .then((session) => {
                    this.objectIdLocal = session.get(this.sessionKey).id;
                    this.init();
                }).catch((error) => {
                    console.log(error);
                });
        } else {
            this.objectIdLocal = this.objectId;
        }
    }
});