<template>
    <div>
        <table class="mm__threads_table">
            <thead>
                <tr>
                    <th></th>
                    <th>Thread Status</th>
                    <th>Thread Title</th>
                    <th>Member</th>
                    <th>Assigned Admin</th>
                    <th>Thread Category</th>
                    <th>Last Updated</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr v-if="threads.length === 0">
                    <td colspan="8" class="no-messages">There are no messages</td>
                </tr>
                <tr v-for="thread in threads" :key="thread.id" :class="thread.unread_class">
                    <td>
                        <input type="checkbox"
                               :value="thread.id"
                               v-model="localSelectedThreads"
                               @change="emitSelectedThreads" />
                    </td>
                    <td class="thread-status" :data-status="thread.status">{{ thread.status_name }}</td>
                    <td>{{ thread.title }}</td>
                    <td>{{ thread.threadMemberName }}</td>
                    <td>{{ thread.threadAdminName }}</td>
                    <td>{{ thread.category_name }}</td>
                    <td>{{ thread.last_updated || 'Unknown' }}</td>
                    <td>
                        <a class="view-message" :href="`/admin/members/messaging/threads/${thread.url}`">
                            <i class="fa fa-eye"></i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>
export default {
    name: 'ThreadsTable',
    props: {
        threads: {
            type: Array,
            required: true
        },
        selectedThreads: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            localSelectedThreads: [...this.selectedThreads] // local copy
        }
    },
    watch: {
        // update local copy if parent changes selectedThreads
        selectedThreads(newVal) {
            this.localSelectedThreads = [...newVal]
        }
    },
    methods: {
        emitSelectedThreads() {
            this.$emit('checked-threads', [...this.localSelectedThreads])
        }
    }
}
</script>
