<template>
    <v-layout row justify-center>
        <v-dialog
            v-model="dialog"
            persistent
            scrollable
            max-width="600px"
        >
            <v-card>
                <v-card-title class="headline">{{ $t("settings") }}</v-card-title>
                <v-card-text>
                    <v-switch
                        v-model="darkTheme"
                        color="blue"
                        :label="$t('darkTheme')"
                        class="ml-3"
                    ></v-switch>
                    <v-switch
                        v-model="autoBookmark"
                        color="blue"
                        :label="$t('autoBookmarks')"
                        class="ml-3"
                    ></v-switch>
                    <v-switch
                        v-model="autoLoadBooks"
                        color="blue"
                        :label="$t('autoLoadBooks')"
                        class="ml-3"
                    ></v-switch>
                    <div class="mb-7 text-body-1">{{ $t("playbackRate") }}</div>
                    <v-slider
                        v-model="playbackRate"
                        color="blue"
                        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 flat variant="outlined" color="info" @click="dialog = false">Ok</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </v-layout>
</template>

<script>
    export default {
        name: "SettingsDialog",

        data () {
            return {
                dialog:        false,
                autoBookmark:  false,
                autoLoadBooks: false,
                darkTheme:     false,
                locale:        "en",
                playbackRate:  1,
            }
        },

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

                    let userLocale = navigator.language || navigator.userLanguage;
                    userLocale = userLocale.indexOf("-") > 0
                        ? userLocale.substring(0, userLocale.indexOf("-")).toLowerCase()
                        : userLocale.toLowerCase();

                    this.locale = userLocale;
                }
            },

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