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

            <v-card-text>
                <v-layout row wrap>
                    <v-flex xs12>
                        <v-list>
                            <v-list-tile v-for="(lang, index) in langs" :key="lang.id">
                                <v-list-tile-action>
                                    <v-checkbox v-model="lang.chex" :value="'Y'"
                                        @change="$emit('change', $event, index)"></v-checkbox>
                                </v-list-tile-action>
                                <v-list-tile-content>
                                    <v-list-tile-title>{{ lang.name }}</v-list-tile-title>
                                </v-list-tile-content>
                            </v-list-tile>
                        </v-list>
                    </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="$emit('print')">
                    Cetak
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

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

module.exports = {
    name: 'PrintLangDialog',

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

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

    watch: {
        'value': function (newVal) {
            if (!newVal) {
                // Reset selections when dialog closes
                this.langs.forEach(function (lang) {
                    lang.chex = lang.default === 'Y' ? 'Y' : 'N'
                })
            }
        }
    },

    methods: {
        changeSwitch: function (value, index) {
            this.$emit('change', value, index)
        },

        doPrint: function () {
            this.$emit('print')
        }
    }
}
</script>

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