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

            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12>
                        <v-radio-group v-model="selectedLangId">
                            <v-radio v-for="lang in langs" :key="lang.id" :label="lang.name" :value="lang.id"></v-radio>
                        </v-radio-group>
                    </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="handleSelect">
                    Pilih
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

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

module.exports = {
    name: 'LangDialog',

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

    data: function () {
        return {
            selectedLangId: this.selectedLang ? this.selectedLang.id : null
        }
    },

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

    watch: {
        'value': function (newVal) {
            if (newVal) {
                // Set initial selection when dialog opens
                this.selectedLangId = this.selectedLang ? this.selectedLang.id : null
            }
        }
    },

    methods: {
        handleSelect: function () {
            var self = this
            var selectedLang = this.langs.find(function (lang) {
                return lang.id === self.selectedLangId
            })
            this.$emit('close', selectedLang)
        }
    }
}
</script>

<style scoped>
.v-input--selection-controls {
    margin-top: 0;
}

.v-radio {
    margin-bottom: 8px;
}
</style>