<template>
    <div>
        <div v-if="addingComment" class="bg-light rounded p-2">
            <textarea v-model="newComment" class="form-control bg-light text-box" :placeholder="placeholder"></textarea>
            <div class="d-flex justify-content-end">
                <button v-if="addingReply" class="btn btn-secondary" @click="replyComment"
                    :disabled="newComment.length < 1">Reply</button>
                <button v-else class="btn btn-primary" @click="saveComment"
                    :disabled="newComment.length < 1">Save</button>
                <button v-if="allowCancel" class="btn btn-secondary ml-2" @click="cancelComment">Cancel</button>
            </div>
        </div>
        <button v-else class="btn btn-primary btn-block" @click="newComment = ''; addingComment = true">
            {{ addCommentText }}
        </button>
        <div v-for="(item, index) in list.slice().reverse()" :key="`${item.id}` + index">
            <div class="d-flex align-items-center">
                <div class="d-flex align-items-center">
                    <img class='avatar' :src="gravatar(item.user.email)" />
                    <div class="p-2">
                        <p v-if="item.replyTo">Reply to {{ item.replyTo }}</p>
                        <p class="m-0 p-0">{{ item.user.name }}</p>
                        <p class="posted-date">{{ formatDate(item.date) }}</p>
                    </div>
                </div>  
                <span v-if="allowReply" class="btn mdi mdi-reply white" @click="newReply(index)"></span>
            </div>
            <span class="comment">
                {{ item.comment }} 
            </span>
        </div>
    </div>
</template>
<script>
import md5 from "md5";
import moment from 'moment'
import 'moment/locale/ro';
import 'moment/locale/fr';
import 'moment/locale/de';
import 'moment/locale/es';
import 'moment/locale/it';
export default {
    props: {
        currentUserData: {
            type: Object,
            default: () => { }
        },
        list: {
            type: Array,
            default: () => []
        },
        value: {
            type: Array,
            default: () => []
        },
        allowReply: {
            type: Boolean,
            default: true
        },
        placeholder: {
            type: String,
            default: 'Add your comment'
        },
        addCommentText: {
            type: String,
            default: 'Add comment'
        },
        allowCancel: {
            type: Boolean,
            default: true,
        },
        locale: {
            type: String,
            default: 'ro',
        }
    },
    data() {
        return {
            addingComment: false,
            addingReply: false,
            newComment: '',
            replyingTo: '',
        }
    },
    computed: {
        isDisable() {
            return this.newComment.length > 1;
        }
    },
    methods: {
        saveComment() {
            this.$emit('input', [...this.list, { user: { id: this.currentUserData.id, name: this.currentUserData.name, email: this.currentUserData.email }, comment: this.newComment, date: new Date() }])
            this.list.push({ user: { id: this.currentUserData.id, name: this.currentUserData.name, email: this.currentUserData.email }, comment: this.newComment, date: new Date() })
            this.newComment = '';
            this.addingComment = false;
        },
        newReply(index) {
            this.addingComment = true;
            this.addingReply = true;
            this.replyingTo = index;
        },
        replyComment() {
            const repliedUser = (this.list[this.replyingTo] && this.list[this.replyingTo].user && this.list[this.replyingTo].user.name) || '';
            const comment = {
                user: { ...this.currentUserData },
                comment: this.newComment,
                replyTo: repliedUser,
                date: new Date()
            };
            this.$emit('input', [...this.list, comment]);
            this.list.push(comment);
            this.newComment = '';
            this.addingComment = false;
            this.addingReply = false;
            this.replyingTo = '';
        },
        gravatar(email) {
            const hash = md5(email.trim().toLowerCase());
            return `https://www.gravatar.com/avatar/${hash}?d=https://cdn-icons-png.flaticon.com/128/3033/3033143.png`;
        },
        cancelComment(){
            this.addingComment = false;
            this.newComment = '';
            this.addingReply = false;
        },
        formatDate(date) {
            const calendarStrings = {
                en: {
                    sameDay: '[Today at] HH:mm',
                    nextDay: '[Tomorrow at] HH:mm',
                    nextWeek: 'dddd [at] HH:mm',
                    lastDay: '[Yesterday at] HH:mm',
                    lastWeek: '[Last] dddd [at] HH:mm',
                    sameElse: 'DD/MM/YYYY HH:mm',
                },
                ro: {
                    sameDay: '[Astăzi la] HH:mm',
                    nextDay: '[Mâine la] HH:mm',
                    nextWeek: 'dddd [la] HH:mm',
                    lastDay: '[Ieri la] HH:mm',
                    lastWeek: '[Săptămâna trecută] dddd [la] HH:mm',
                    sameElse: 'DD/MM/YYYY HH:mm',
                },
                fr: {
                    sameDay: '[Aujourd’hui à] HH:mm',
                    nextDay: '[Demain à] HH:mm',
                    nextWeek: 'dddd [à] HH:mm',
                    lastDay: '[Hier à] HH:mm',
                    lastWeek: '[La semaine dernière] dddd [à] HH:mm',
                    sameElse: 'DD/MM/YYYY HH:mm',
                },
                de: {
                    sameDay: '[Heute um] HH:mm',
                    nextDay: '[Morgen um] HH:mm',
                    nextWeek: 'dddd [um] HH:mm',
                    lastDay: '[Gestern um] HH:mm',
                    lastWeek: '[Letzten] dddd [um] HH:mm',
                    sameElse: 'DD.MM.YYYY HH:mm',
                },
                es: {
                    sameDay: '[Hoy a las] HH:mm',
                    nextDay: '[Mañana a las] HH:mm',
                    nextWeek: 'dddd [a las] HH:mm',
                    lastDay: '[Ayer a las] HH:mm',
                    lastWeek: '[El] dddd [pasado a las] HH:mm',
                    sameElse: 'DD/MM/YYYY HH:mm',
                },
                it: {
                    sameDay: '[Oggi alle] HH:mm',
                    nextDay: '[Domani alle] HH:mm',
                    nextWeek: 'dddd [alle] HH:mm',
                    lastDay: '[Ieri alle] HH:mm',
                    lastWeek: '[Lo scorso] dddd [alle] HH:mm',
                    sameElse: 'DD/MM/YYYY HH:mm',
                },
            };
            return moment(date).calendar(null, calendarStrings[this.locale] || calendarStrings.en);
        }
    },
    mounted() {
        moment.locale(this.locale);
    },
    watch: {
        locale(newLocale) {
            moment.locale(newLocale);
        },
    },

    /*
    filters: {
        moment: function (date) {
            return moment(date).calendar();
        }
    },
    */
}

</script>
<style lang="scss" >
.comment {
    color: #555555;
}

.posted-date {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #6C757D;
}

.text-box {
    border: none;
    margin-bottom: 10px;
}

.avatar {
    vertical-align: middle;
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
</style>