<template>
    <v-layout row justify-center>
        <v-dialog
            v-model="dialog"
            persistent
            width="350"
        >
            <v-card style="width: 350px">
                <v-card-title class="headline">{{ $t("settings") }}</v-card-title>
                <v-card-text>
                    <v-switch
                        v-model="darkTheme"
                        color="blue"
                        :label="$t('darkTheme')"
                    ></v-switch>
                    <div class="mb-7 text-caption">{{ $t("playbackRate") }}</div>
                    <v-slider
                        v-model="playbackRate"
                        color="blue"
                        label="color"
                        min="0.5"
                        max="2"
                        step="0.5"
                        show-ticks="always"
                        thumb-label="always"
                        tick-size="4"
                    ></v-slider>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" flat @click="dialog = false">Ok</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
    export default {
        data () {
            return {
                dialog:       false,
                darkTheme:    false,
                playbackRate: 1
            }
        },

        watch: {
            dialog (val) {
                if (val) {
                    this.darkTheme    = this.$store.getters.darkTheme;
                    this.playbackRate = this.$store.getters.playbackRate;
                }
            },

            darkTheme (val)    { this.$store.commit("setDarkTheme", val); },
            playbackRate (val) { this.$store.commit("setPlaybackRate", val); }
        }
    }
</script>
