<template>
    <v-dialog v-model="show" max-width="600px">
        <v-card>
            <v-card-title class="headline">
                Pilih Template
            </v-card-title>

            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12>
                        <v-text-field v-model="searchQuery" label="Cari Template" prepend-icon="search"
                            clearable></v-text-field>
                    </v-flex>

                    <v-flex xs12>
                        <v-data-table :headers="headers" :items="filteredTemplates" :search="searchQuery"
                            v-model="selectedTemplateId" item-key="id" single-select select-all class="elevation-1">
                            <template slot="items" slot-scope="props">
                                <tr @click="selectTemplate(props.item)"
                                    :class="{ 'selected': props.item.id === selectedTemplateId }">
                                    <td>{{ props.item.name }}</td>
                                    <td>{{ props.item.description }}</td>
                                </tr>
                            </template>
                        </v-data-table>
                    </v-flex>
                </v-layout>
            </v-card-text>

            <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="grey darken-1" flat @click="show = false">
                    Batal
                </v-btn>
                <v-btn color="primary" @click="handleApply">
                    Terapkan
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script>
const _ = require('lodash')

module.exports = {
    name: 'TemplatesDialog',

    props: {
        value: {
            type: Boolean,
            default: false
        },
        templates: {
            type: Array,
            default: function () { return [] }
        },
        selectedTemplate: {
            type: Object,
            default: null
        }
    },

    data: function () {
        return {
            searchQuery: '',
            selectedTemplateId: this.selectedTemplate ? this.selectedTemplate.id : null,
            headers: [
                { text: 'Nama Template', value: 'name' },
                { text: 'Deskripsi', value: 'description' }
            ]
        }
    },

    computed: {
        show: {
            get: function () {
                return this.value
            },
            set: function (value) {
                this.$emit('input', value)
            }
        },

        filteredTemplates: function () {
            var self = this
            if (!this.searchQuery) {
                return this.templates
            }

            var query = this.searchQuery.toLowerCase()
            return this.templates.filter(function (template) {
                return template.name.toLowerCase().includes(query) ||
                    (template.description && template.description.toLowerCase().includes(query))
            })
        }
    },

    watch: {
        'value': function (newVal) {
            if (newVal) {
                // Set initial selection when dialog opens
                this.selectedTemplateId = this.selectedTemplate ? this.selectedTemplate.id : null
            } else {
                // Reset when dialog closes
                this.selectedTemplateId = null
                this.searchQuery = ''
            }
        }
    },

    methods: {
        selectTemplate: function (template) {
            this.selectedTemplateId = template.id
        },

        handleApply: function () {
            var self = this
            var selectedTemplate = this.templates.find(function (template) {
                return template.id === self.selectedTemplateId
            })
            this.$emit('apply', selectedTemplate)
        }
    }
}
</script>

<style scoped>
.selected {
    background-color: #e3f2fd;
}
</style>