<template>
    <div key="not-loaded" v-if="!isLoaded"></div>
    <div key="loaded" v-else>
        <div class="triangles">
            <div class="search">
                <input class="input" type="text" v-model="searchQuery" v-on:keyup.enter="search" v-on:input="search">
                <input type="button" class="button" value="Найти" @click="search">
            </div>
            <div id="tooltip-list" v-if="isDisplayLiveSearch">
                <div v-for="entity in entitiesFound" @click="onEntityClick(entity.id)" class="tooltip-entity">
                    {{ entity.name }}
                </div>
            </div>
            <div v-else></div>
            <div class="flex-data">
                <div class ="flex-item">
                    <div class="title">Популярные ключевые слова</div>
                    <div v-for="(keyword, index) in keywords" @click="onKeywordClick(keyword)" :style="{ background: getColor(index) }" class="text">
                        {{ keyword.word }}
                    </div>
                </div>
                <div class ="flex-item">
                    <div class="title">Популярные сущности</div>
                    <div v-for="(entity, index) in entities" :style="{ background: getColor(index) }" class="text entity"
                             @click="onEntityClick(entity.id)">
                        {{ entity.name }}
                    </div>
                </div>
            </div>
	    <div v-if="isGraphNotLoaded">Loading</div>
            <person-mentions-timetable v-else>
            </person-mentions-timetable>
        </div>
    </div>
</template>

<script>
    import PersonMentionsTimetable from "./PersonMentionsTimetable.vue";
    function convertDate(year, month, day) {
        let result = year + '-';
        if (month < 10) {
            result += '0' + month + '-';
        } else {
            result += month + '-';
        }
        if (day < 10) {
            result += '0' + day;
        } else {
            result += day;
        }
        return result;
    }

    export default {
        name: 'main-page',
	components: {
	    PersonMentionsTimetable,
	},
        data: function() {
            return {
                searchQuery: '',
                searchResults: ''
            }
        },
        watch: {
            searchResults: function(value) {
                if (value.length > 0) {
                    this.$store.state.entitiesFound = value;
                } else {
                    this.$store.state.entitiesFound = [];
                }
            }
        },
        created: function () {
            this.$store.dispatch('loadMainPageData');
	    this.loadData();
        },
        computed: {
            isLoaded() {
                return !!this.$store.state.mainPageData;
            },
	    isGraphNotLoaded() {
                return this.$store.state.graphData === null;
            },
            keywords() {
                return this.$store.state.mainPageData.keywords;
            },
            entities() {
                return this.$store.state.mainPageData.entities;
            },
            entitiesFound () {
                return this.$store.state.entitiesFound;
            },
            isDisplayLiveSearch () {
                return this.$store.state.entitiesFound.length !== 0;
            }
        },
        methods: {
	    loadData(){
		this.$store.state.graphData = null;
		    let now = new Date();
                    let prev = new Date(now - 7*1000*60*60*24);
		    this.$store.state.time = {
                        end: convertDate(now.getFullYear(), now.getMonth()+1, now.getDate()),
                        begin: convertDate(now.getFullYear(), now.getMonth()+1, prev.getDate())
                    };
                    this.$store.state.entityIds = [44,20,278,217,59,240,42,25,190,6];
	            let params = {
                        timeFrom: this.$store.state.time.begin,
                        timeTo: this.$store.state.time.end,
                        keywords: this.$store.state.filterKeys
                    };
		this.$store.watch((state)=> state.mainPageData, () => {


	            this.$store.dispatch('loadGraphData', params);
	        });
	    },
            getColor(color) {
                const colors = [
                    "#FBF8B7",
                    "#7F8B99",
                    "#FFEFBE",
                    "#62BABC"
                ];
                return colors[color % colors.length];
            },
            onEntityClick (entityId) {
                this.$store.state.entitiesFound = [];
                this.$store.state.isDisplayInput = true;
                this.$router.push('/profile/'+ entityId + '/');
            },
	    onKeywordClick(keyword) {
		let filters =  this.$store.state.filterKeys;
                let index = filters.map(key => key.id).indexOf(keyword.id);
                if (index === -1) {
                    filters.push(keyword);
                    this.$store.state.filterKeys = filters;
                    this.loadData();
                }
	    },
            search() {
                if (this.searchQuery === '') {
                    this.$store.state.entitiesFound = [];
                    return;
                }
                let this_ = this;
                $.ajax({
                    url: '/search/' + this.searchQuery,
                    type: 'GET',
                    dataType: 'json',
                    success: function (response) {
                        this_.searchResults = response.matched;
                    },
                    error: function (jqXHR, e, errorMessage) {
                        console.log('Unable to load search results: ' + errorMessage);
                    }
                });
            }
        }
    }

</script>

<style scoped>

.triangles {
    background-image: url(/static/drawable/main.png);
    background-size: 55%;
    background-repeat: no-repeat;
    background-position-x: center;
    z-index: 1;
}

.logo {
    background-image: url(/static/drawable/logo.png);
    width: 5.7%;
    height: 70px;
    background-size: 100%;
    background-repeat: no-repeat;
}

.search {
    padding-top: 15%;
    text-align: center;
}

.input {
    border-radius: 0;
    width: 70%;
    font-size: 20px;
    border: 1px solid black;
}

.button {
    background-color: #78B7BB;
    font-size: 24px;
    border: 1px solid black;
}

.flex-data {
    display: flex;
}

.flex-item {
    padding: 140px;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    font-size: 20px;
    width: 50%;
}
.title {
    font-size: 25px;
}
.text {
    display: inline-block;
    margin: 2%;
    box-shadow: 0 0 4px;
}

.entity:hover {
    cursor: pointer;
}

    #tooltip-list {
        z-index: 100;
        position: absolute;
        background: #eeeeee;
        font-size: 20px;
        text-align: left;
        width: 70%;
        left: 12.7%
    }
    .tooltip-entity {
        padding: 5px;
        border-bottom: 1px solid #DDDDDD;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .tooltip-entity:hover {
        cursor: pointer;
        background: #FFEFBE;
    }

</style>