(function () {

    "use strict";

    // Consts
    // /////////////////////////////////////////////////////////////////////////
    var EVENT_BRIDGE_OPEN_MESSAGE = "eventBridgeOpen",
        UPDATE_UI = "update_ui",

        GOTO = "goto",
        VOTE_AVATAR = "vote_avatar",
        VOTE_DOMAIN = "vote_domain",

        EVENTBRIDGE_SETUP_DELAY = 200;

    // Components
    // /////////////////////////////////////////////////////////////////////////

    Vue.component('navigation', {
        props: {
            polls: { type: Object }
        },
        template: `
                <nav>
                    <div class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
                        <a class="nav-item nav-link active ml-4" id="nav-domains-tab" data-toggle="tab" href="#nav-domains" role="tab"
                        aria-controls="nav-domains" aria-selected="true">Best Environment</a>
                        <a class="nav-item nav-link mr-4" id="nav-avatars-tab" data-toggle="tab" href="#nav-avatars" role="tab"
                        aria-controls="nav-avatars" aria-selected="false">Best Avatar</a>
                    </div>
                </nav>
            `
    })

    Vue.component('domainlist', {
        props: {
            flagvisited: { type: Boolean },
            visitedalldomains: { type: Boolean },
            domains: { type: Array },
            open: { type: Boolean },
            voted: { type: Boolean } // *** 
        },
        computed: {
            groupedItems() {

                var grouped = [];
                var index = -1;
                for (var i = 0; i < this.domains.length; i++) {
                    if (i % 2 == 0) {
                        index++;
                        grouped[index] = [];
                        grouped[index].id = index;
                    }
                    grouped[index].push(this.domains[i]);
                }

                if (grouped.length && grouped[index].length === 1) {
                    grouped[index].push({ hidden: true });
                }
                return grouped;
            },
            getTitle() {
                if (!this.visitedalldomains) {
                    return "Visit the entries then vote:";
                } else if (this.voted) {
                    return "Thanks for voting!";
                } else {
                    return "Vote for your favorite!";
                }
            }
        },
        methods: {
            closeVisitedModal() {
                console.log("closeModal");
                this.isVisitedModalVisible = false;
                this.showedVisited = true;
            }
        },
        data() {
            return {
                isVisitedModalVisible: false,
                showedVisited: false
            };
        },
        watch: {
            visitedalldomains: function (newVal, oldVal) {
                if (newVal === true &&  oldVal === false && this.voted === false) {
                    this.isVisitedModalVisible = true;
                }
            }
        },
        template: `
                <div class="tab-pane fade show active" id="nav-domains" role="tabpanel" aria-labelledby="nav-domains-tab">
                    <div v-if="open" class="p-2">
                        <h4 class="color-pink">{{ getTitle }}</h4>
                        <template v-for="items in groupedItems">
                            <div class="row" :key="items.id">
                                <domaincard  v-for="item in items" :voted="voted" :domain="item" :key="item.name" :visitedalldomains="visitedalldomains"></domaincard>
                            </div>
                        </template>
                    </div>
                    <div v-if="!open" class="p-2 pt-5">
                        <h4 class="text-center color-pink">Best Environment voting isn't open yet, please check back later.</h4>
                    </div>

                    <modal v-bind:alert="true" v-if="!showedVisited" v-show="isVisitedModalVisible" @close="closeVisitedModal">

                        <div slot="header">
                        </div>
                        
                        <div slot="body">
                            <div class="p-3 mt-2">
                                <h2 class="color-pink">You've seen all the entries!</h2>
                                <div class="flex-container-row pb-4">
                                    <p class="flex-item">Now you can vote for your favorite</p>
                                </div>
                            
                                <div class="flex-container-row">
                                    <a href="#" class="flex-item btn btn-primary bkgd-pink" @click="closeVisitedModal">OK</a>
                                </div>
                            </div>
                        </div>
                        
                        <div slot="footer" class="text-center"></div>
                    </modal>

                </div>
            `
    })

    Vue.component('domaincard', {
        props: {
            visitedalldomains: { type: Boolean },
            domain: { type: Object },
            voted: { type: Boolean }
        },
        methods: {
            goto(domainName) {
                EventBridge.emitWebEvent(JSON.stringify({
                    type: GOTO,
                    value: domainName
                }));
                console.log(domainName);
            },
            votedomain(domainName) {
                EventBridge.emitWebEvent(JSON.stringify({
                    type: VOTE_DOMAIN,
                    value: domainName
                }));
                console.log(domainName);
                this.closeVoteModal();
            },
            showVoteModal() {
                if (!this.domain.hidden && !this.voted) {
                    this.isVoteModalVisible = true;
                }
            },
            closeVoteModal() {
                console.log("closeVoteModal");
                this.isVoteModalVisible = false;
            },
        },
        computed: {
            styles() {
                return "background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0)), url('" + this.domain.image +
                    "'); background-position: center; background-size: cover;";
            },
            showCheckMark () {
                if (this.voted) {
                    return this.domain.voted;
                } else {
                    return this.visitedalldomains;
                }
            },
        },
        data() {
            return {
                isVoteModalVisible: false
            };
        },
        template: `
        <div class="col-sm">
            <div class="card card-image" v-bind:class="{ 'ghost': domain.hidden, 'card-visited': domain.visited }" v-bind:style="styles">

                <div class="card-body" v-bind:class="{ 'voted-domain': domain.voted }">
                    <h4 class="card-title txt-color-white">{{ domain.name }}</h4>
                    <!-- <div v-if="domain.voted" v-bind:class="{ 'fill': domain.voted }" class="stroke voted-check icon icon-check"></div> -->
                    <div class="align-bottom-wrapper">
                        <!-- <div v-if="!visitedalldomains" class="align-bottom-left">{{ domain.visited ? "Visited." : "" }}</div> -->
                        <div v-if="showCheckMark" v-on:click="showVoteModal" v-bind:class="{ 'fill': domain.voted }" class="align-bottom-left stroke text-size-icon icon icon-check"></div>
                        <a href="#" class="align-bottom-right btn go-button" v-on:click="goto(domain.name)"></a>
                    </div>
                </div>
            </div>

            <modal v-show="isVoteModalVisible" v-bind:alert="true" v-bind:hidex="false" v-bind:isavatar="false" @close="closeVoteModal">
                <div slot="header"></div>
            
                <div slot="body">
                    <div class="p-3 mt-2">
                        <div class="flex-container-row pb-4">
                            <h2 class="flex-item">Vote for {{ domain.name }}?</h2>
                        </div>
                        <div class="flex-container-row pb-4">
                            <p class="flex-item">You can only vote once. Your vote cannot be changed later.</p>
                        </div>
                
                        <div class="flex-container-row">
                            <a href="#" class="flex-item btn btn-secondary bkgd-pink m-2" @click="closeVoteModal">Back</a>
                            <a href="#" class="flex-item btn btn-primary bkgd-pink m-2" @click="votedomain(domain.name)">Vote for {{ domain.name }}</a>
                        </div>
                    </div>
                </div>    
            </modal>
        </div>
        `
    })

    // Vue.component('login', {
    //     props: {
    //         avatars: { type: Array },
    //         open: { type: Boolean },
    //         voted: { type: Boolean } // ***
    //     },
    //     computed: {
    //         show () {
    //             return !loggin;
    //         }
    //     },
    //     template: `
    //         <div  class="tab-pane fade" id="nav-avatars" role="tabpanel" aria-labelledby="nav-avatars-tab">
    //             <div v-if="!open" class="p-2 pt-5">
    //                 <h4 class="text-center color-pink">Best Avatar voting isn't open yet, please check back later.</h4>
    //             </div>
    //             <div v-if="open" class="p-2">
    //                 <h4 class="color-pink">{{ voted ? "Thanks for voting!" : "Vote for the best avatar" }}</h4>
    //                 <template v-for="items in groupedItems">
    //                     <div class="row" :key="items.id">
    //                         <avatarcard  v-for="item in items" :voted="voted" :avatar="item" :key="item.name"></avatarcard>
    //                     </div>
    //                 </template>
    //             </div>
    //         </div>
    //     `
    // })

    Vue.component('avatarlist', {
        props: {
            avatars: { type: Array },
            open: { type: Boolean },
            voted: { type: Boolean } // ***
        },
        computed: {
            groupedItems() {
                var grouped = [];
                var index = -1;
                for (var i = 0; i < this.avatars.length; i++) {
                    if (i % 3 == 0) {
                        index++;
                        grouped[index] = [];
                        grouped[index].id = index;
                    }
                    grouped[index].push(this.avatars[i]);
                }

                if (grouped.length && grouped[index].length < 3) {
                    console.log("robin");
                    grouped[index].push({ hidden: true });
                    if (grouped[index].length === 2) {
                        console.log("robin");
                        grouped[index].push({ hidden: true });
                    }
                }
                return grouped;
            }
        },
        template: `
            <div  class="tab-pane fade" id="nav-avatars" role="tabpanel" aria-labelledby="nav-avatars-tab">
                <div v-if="!open" class="p-2 pt-5">
                    <h4 class="text-center color-pink">Best Avatar voting isn't open yet, please check back later.</h4>
                </div>
                <div v-if="open" class="p-2">
                    <h4 class="color-pink">{{ voted ? "Thanks for voting!" : "Vote for the best avatar" }}</h4>
                    <template v-for="items in groupedItems">
                        <div class="row" :key="items.id">
                            <avatarcard  v-for="item in items" :voted="voted" :avatar="item" :key="item.name"></avatarcard>
                        </div>
                    </template>
                </div>
            </div>
        `
    })

    Vue.component('avatarcard', {
        props: {
            avatar: { type: Object },
            voted: { type: Boolean }
        },
        methods: {
            voteavatar(avatarName) {
                EventBridge.emitWebEvent(JSON.stringify({
                    type: VOTE_AVATAR,
                    value: avatarName
                }));
                console.log(avatarName);
                this.closeVoteModal();
            },
            showAvatarInfoModal() {
                if (!this.avatar.hidden) {
                    this.isAvatarInfoModalVisible = true;
                }
            },
            closeAvatarInfoModal() {
                console.log("closeAvatarInfoModal");
                this.isAvatarInfoModalVisible = false;
            },

            showVoteModal() {
                if (!this.avatar.hidden && !this.voted) {
                    this.isVoteModalVisible = true; 
                    this.isAvatarInfoModalVisible = false;
                }
            },
            closeVoteModal() {
                console.log("closeAvatarInfoModal");
                this.isVoteModalVisible = false;
                this.isAvatarInfoModalVisible = true;
            },
            closeBothModals() {
                this.isVoteModalVisible = false;
                this.isAvatarInfoModalVisible = false;
            }

        },
        data() {
            return {
                isAvatarInfoModalVisible: false,
                isVoteModalVisible: false,
            };
        },
        computed: {
            cardStyles() {
                if (this.avatar && this.avatar.image && this.avatar.image.length && this.avatar.image.length > 5) {
                    var str = this.avatar.image;
                    var urlLength = str.length;
                    var charAt4 = str.charAt(urlLength - 4); // .png/.jpg
                    var charAt5 = str.charAt(urlLength - 5); // .jpeg
    
                    var index = -1;
                    if (charAt4 === "." || charAt5 === ".") {
                        index = charAt4 === "." ? urlLength - 4 : urlLength - 5;
                    }
    
                    var root = str.slice(0, index);
                    var end = str.slice(index, urlLength);
                    
                    var thumbnail = "-thumbnail";

                    var styles = "background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), url('" + root + thumbnail + end +
                    "'); background-position: center; background-size: cover;"

                    if (this.avatar.voted) {
                        styles += "border: 5px solid #FB0488 !important; background: linear-gradient(rgba(251, 4, 136, 0.3), rgba(251, 4, 136, 0.3)), url('" + root + thumbnail + end +
                        "'); background-position: center; background-size: cover;";
                    } else {
                        styles += "border:none";
                    }
    
                    return styles;
                }
            },
            modalStyles() {
                return "background: url('" + this.avatar.image +
                    "'); background-position: center; background-size: cover; border:none";
            },
            voteBarText() {

                if (!this.voted) {
                    return "  Vote for " + this.avatar.name;
                } else {
                    // voted already
                    if (this.avatar.voted) {
                        return "  Voted!";
                    } else {
                        return "Thanks for voting!";
                    }
                }
            },
            votedFor () {
                return this.voted && this.avatar.voted;
            },
            notVotedFor () {
                return this.voted && !this.avatar.voted;
            }
        },
        template: `
        <div class="col-sm">
            <div @click="showAvatarInfoModal">
                <div class="card card-image avatar-card" v-bind:class="{ 'ghost': avatar.hidden, 'card-visited': avatar.voted, 'voted-domain': avatar.voted }" v-bind:style="cardStyles">

                    <div class="align-bottom-wrapper-avatar">
                        <!-- <div v-if="!visitedalldomains" class="align-bottom-left">{{ domain.visited ? "Visited." : "" }}</div> -->
                        <div v-if="votedFor" class="align-bottom-left fill stroke text-size-icon icon icon-check"></div>
                    </div>
                
                </div>
                <p class="card-title bold text-center">{{ avatar.name }}</p>
            </div>

            <modal v-show="isAvatarInfoModalVisible" v-bind:hidex="false" v-bind:isavatar="true" @close="closeAvatarInfoModal">
                <div slot="header"></div>
                <div slot="body">
                    <h4 class="avatar-name color-pink">{{ avatar.name }}</h4>
                    <div class="card card-image modal-image flex-item" v-bind:style="modalStyles"></div>
                    <div v-bind:class="{ 'vote-avatar-bar': !voted, 'votedfor-avatar-bar': votedFor, 'notvotedfor-avatar-bar': notVotedFor }" v-on:click="showVoteModal" class="flex-container-row avatar-bar">
                        <div v-if="avatar.voted || !voted" v-bind:class="{ 'fill': avatar.voted}" class="flex-item stroke stroke-pink avatar-icon-fill text-size-icon icon icon-check"></div>
                        <h4 class="flex-item bold txt-modal-body">{{ voteBarText }}</h4>
                    </div>
                </div>
            </modal>

            <modal v-show="isVoteModalVisible" v-bind:alert="true" v-bind:hidex="false" v-bind:isavatar="false" @close="closeBothModals">
                <div slot="header"></div>
            
                <div slot="body">
                    <div class="p-3 mt-2">
                        <div class="flex-container-row pb-4">
                            <h2 class="flex-item">Vote for {{ avatar.name }}?</h2>
                        </div>
                        <div class="flex-container-row pb-4">
                            <p class="flex-item">You can only vote once. Your vote cannot be changed later.</p>
                        </div>
                
                        <div class="flex-container-row">
                            <a href="#" class="flex-item btn btn-secondary bkgd-pink m-2" @click="closeVoteModal">Back</a>
                            <a href="#" class="flex-item btn btn-primary bkgd-pink m-2" @click="voteavatar(avatar.name)">Vote for {{ avatar.name }}</a>
                        </div>
                    </div>
                </div>    
            </modal>
        </div>
        `
    })

    // Vue.component('avatarview', {
    //     props: {
    //         avatar: { type: Object },
    //         voted: { type: Boolean }
    //     },
    //     template: `
    //         <modal v-show="isModalVisible" v-bind:hidex="false" v-bind:isavatar="true" @close="closeAvatarInfoModal">
    //             <div slot="header"></div>
    //             <div slot="body">
    //                 <h4 class="avatar-name">{{ avatar.name }}</h4>
    //                 <div class="card card-image modal-image flex-item" v-bind:style="modalStyles"></div>
    //                 <div v-bind:class="{ 'vote-avatar-bar': !voted, 'votedfor-avatar-bar': voted && avatar.voted, 'notvotedfor-avatar-bar': voted && !avatar.voted }" v-on:click="voteavatar(avatar.name)" class="flex-container-row avatar-bar">
    //                     <div v-if="avatar.voted || !voted" v-bind:class="{ 'fill': avatar.voted}" class="flex-item stroke stroke-pink avatar-icon-fill text-size-icon icon icon-check"></div>
    //                     <h4 class="flex-item bold txt-modal-body">{{ voteBarText }}</h4>
    //                 </div>
    //             </div>
    //         </modal>
    //     `
    // })

    Vue.component('modal', {
        props: {
            alert: { type: Boolean },
            hidex: { type: Boolean },
            isavatar: { type: Boolean }
        },
        methods: {
            close() {
                console.log("close");
                this.$emit('close');
            }
        },
        template: `
        <transition name="modal-fade">
            <div class="modal-backdrop">
                <div class="modal" v-bind:class="{ 'modal-alert': alert }" > 
                    <header class="modal-header">
                        <slot name="header"></slot>
                        <button type="button" v-if="!hidex" class="btn-close" @click="close">
                            <div data-icon="w" class="icon"></div>
                        </button> 
                    </header>
                    <section class="modal-body" v-bind:class="{ 'isavatar': isavatar }">
                        <slot name="body"></slot>
                    </section>
                    <footer class="modal-footer">
                        <slot name="footer"></slot>
                    </footer>
                </div>
            </div>
        </transition>
      `
    })

    Vue.component('example', {
        props: {
            example: { type: Object }
        },
        methods: {
            example() {
                EventBridge.emitWebEvent(JSON.stringify({
                    type: EXAMPLE_MESSAGE,
                    value: this.example
                }));
            }
        },
        template: `
                <div class="card">
                    <div class="card-header">
                        {{ example.name }}
                    </div>
                    <div class="card-body">
                        <button class="btn-sm btn-primary mt-1 mr-1" v-on:click="example()">Example</button>
                    </div>
                </div>
            `
    })

    // App
    // /////////////////////////////////////////////////////////////////////////
    var app = new Vue({
        el: '#app',
        data: {
            dataStore: {
                unload: false,
                loading: true,
                loggedin: true,
                voted: {
                    domain: false,
                    avatar: false
                },
                openPolls: {
                    avatar: false,
                    domain: true
                },
                visitedalldomains: false,
                domains: [],
                avatars: []
            }

            // dataStore: {  
            //    "loading": true,
            //    "loggedin": true,
            //     "voted": {
            //         "domain": false,
            //         "avatar": false
            //     },
            //     "openPolls": {  
            //        "avatar":true,
            //        "domain":true
            //     },
            //     "visitedalldomains":false,
            //     "domains": [  
            //        {  
            //           "name":"TheSpot",
            //           "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/6bf/6ed/a7-/thumbnail/hifi-place-6bf6eda7-51d6-45ef-8ffc-28a6c4080af4.jpg?1527698357",
            //           "visited":false,
            //           "index":0
            //        },
            //        { 
            //           "name":"Studio",
            //           "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg",
            //           "visited":true,
            //           "index":1
            //        },
            //        {  
            //           "name":"Help1",
            //           "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633",
            //           "visited":true,
            //           "index":2
            //        },
            //        {  
            //         "name":"Help2",
            //         "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633",
            //         "visited":true,
            //         "index":2
            //      },
            //      {  
            //         "name":"Help3",
            //         "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633",
            //         "visited":true,
            //         "index":2
            //      },
            //      {  
            //         "name":"Help4",
            //         "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633",
            //         "visited":true,
            //         "index":2
            //      },
            //      {  
            //         "name":"Help5",
            //         "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633",
            //         "visited":true,
            //         "index":2
            //      },
            //      {  
            //         "name":"Help6",
            //         "image":"https://hifi-metaverse.s3-us-west-1.amazonaws.com/images/places/previews/0ce/40e/14-/thumbnail/hifi-place-0ce40e14-7c49-4076-8bcf-be6f76fe7482.png?1529018633",
            //         "visited":true,
            //         "index":2
            //      }
            //     ],
            //     "avatars":[  
            //        {  
            //           "name":"Robin1",
            //           "image":"http://hifi-content.s3-us-west-1.amazonaws.com/Experiences/LoadTest/VoteApp/InProgress/V7/Artemis-Feature-Pic.jpg"
            //        },
            //        {  
            //         "name":"Robin2",
            //         "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg"
            //      },
            //      {  
            //         "name":"Robin3",
            //         "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg"
            //      },
            //      {  
            //         "name":"Robin4",
            //         "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg"
            //      },
            //      {  
            //         "name":"Robin5",
            //         "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg"
            //      },
            //      {  
            //         "name":"Robin5",
            //         "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg"
            //      },
            //      {  
            //         "name":"Robin5",
            //         "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg"
            //      },
            //      {  
            //         "name":"Robin5",
            //         "image":"http://img.youtube.com/vi/kEJDqO7WrKY/hqdefault.jpg"
            //      }
            //     ]
            //  }
        }
    });

    // Procedural
    // /////////////////////////////////////////////////////////////////////////
    function onScriptEventReceived(message) {
        var data;
        try {
            data = JSON.parse(message);
            switch (data.type) {
                case UPDATE_UI:
                    app.dataStore = data.value;
                    break;
                // case VISITED_ALL_DOMAINS:
                //     app.dataStore.flagVisited = true;
                //     break;
                default:
            }
        } catch (e) {
            console.log(e)
            return;
        }
    }

    function onLoad() {

        // Initial button active state is communicated via URL parameter.
        // isActive = location.search.replace("?active=", "") === "true";

        setTimeout(function () {
            // Open the EventBridge to communicate with the main script.
            // Allow time for EventBridge to become ready.
            EventBridge.scriptEventReceived.connect(onScriptEventReceived);
            EventBridge.emitWebEvent(JSON.stringify({
                type: EVENT_BRIDGE_OPEN_MESSAGE
            }));
        }, EVENTBRIDGE_SETUP_DELAY);
    }

    // Main
    // /////////////////////////////////////////////////////////////////////////    
    onLoad();

}());