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

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

                    <v-flex xs12>
                        <v-data-table :headers="headers" :items="filteredDoctors" :search="localSearch"
                            v-model="selectedDoctorId" item-key="id" single-select select-all class="elevation-1">
                            <template slot="items" slot-scope="props">
                                <tr @click="selectDoctor(props.item)"
                                    :class="{ 'selected': props.item.id === selectedDoctorId }">
                                    <td>{{ props.item.name }}</td>
                                    <td>{{ props.item.specialization }}</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="handleSave" :disabled="required && !selectedDoctorId">
                    Simpan
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

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

module.exports = {
    name: 'DoctorDialog',

    props: {
        value: {
            type: Boolean,
            default: false
        },
        doctors: {
            type: Array,
            default: function () { return [] }
        },
        selectedDoctor: {
            type: Object,
            default: null
        },
        required: {
            type: Boolean,
            default: false
        },
        search: {
            type: String,
            default: ''
        }
    },

    data: function () {
        return {
            localSearch: this.search,
            selectedDoctorId: this.selectedDoctor ? this.selectedDoctor.id : null,
            headers: [
                { text: 'Nama Dokter', value: 'name' },
                { text: 'Spesialisasi', value: 'specialization' }
            ]
        }
    },

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

        filteredDoctors: function () {
            var self = this
            if (!this.localSearch) {
                return this.doctors
            }

            var query = this.localSearch.toLowerCase()
            return this.doctors.filter(function (doctor) {
                return doctor.name.toLowerCase().includes(query) ||
                    (doctor.specialization && doctor.specialization.toLowerCase().includes(query))
            })
        }
    },

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

    methods: {
        selectDoctor: function (doctor) {
            this.selectedDoctorId = doctor.id
        },

        handleSave: function () {
            if (this.required && !this.selectedDoctorId) {
                return
            }

            var self = this
            var selectedDoctor = this.doctors.find(function (doctor) {
                return doctor.id === self.selectedDoctorId
            })
            this.$emit('save', selectedDoctor)
        }
    }
}
</script>

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