<template>
    <v-container>
   <v-col v-for="message in pm_messages" :key="message.time_sent">
            <v-sheet :color="setPmClass(message.sender_id)">
                <h6>{{ message.time_sent }}</h6>
                {{ message.content }}
            </v-sheet>
        </v-col>
        <v-col>
            <v-textarea
          append-icon="mdi-label"
          class="mx-2"
          label="Reply"
          rows="5"
          v-model="new_message"></v-textarea>
        </v-col>
          <v-col
          cols="12"
          md="4"
        >
        <v-btn @click="onLog">Show mess</v-btn>
        <v-btn @click="onAppendPm">Submit Reply</v-btn>
         <v-btn @click="onNig">Nigger</v-btn>
      </v-col>
    </v-container>
</template>
<script>
export default {
    name: "PmSingle",
    data: () => ({
        new_message: null,

    }),
    methods: {
        loadPM: function() {
            this.$store.dispatch("setViewPm", this.pmid)
        },
        setPmClass(sender_id) {
            if (sender_id == this.pm_meta.from_id) {
                return "blue"
            } else if (sender_id == this.pm_meta.to_id) {
                return "pink"
            }
        },
        onAppendPm: function() {
            this.$store.dispatch("appendPm", {
                pmid: this.pmid,
                content: this.new_message
            })
            this.$forceUpdate()
        },

        onNig: function() {
            this.pm_messages.forEach(mess => {
                console.log("eeeeeee", mess)
            })
        },

        onLog: function() {

            this.pm_messages.forEach(message => {
                console.log('messages', message)
            })
        }
    },
    created: function() {
        this.loadPM()
    },
    computed: {
        uid: function() {
            return this.$store.getters.getUser.uid
        },
        pm_meta: function() {
            return this.$store.getters.getSinglePmMeta
        },
        pm_messages: function() {
            return this.$store.getters.getSinglePmMessages
        },
        pmid: function() {
            return this.$route.params.pmid
        }
    }
}
</script>