<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-tabs
                    v-model="activeTab"
                    centered
                >
                    <v-tab ripple value="settings">{{ $t("settings") }}</v-tab>
                    <v-tab ripple value="about">{{ $t("about") }}</v-tab>
                </v-tabs>
                <v-card-text>
                    <v-window v-model="activeTab">
                        <v-window-item value="settings">
                            <v-switch
                                v-model="darkTheme"
                                color="blue"
                                :label="$t('darkTheme')"
                            ></v-switch>
                            <v-switch
                                v-model="autoBookmark"
                                color="blue"
                                :label="$t('autoBookmarks')"
                            ></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-window-item>

                        <v-window-item value="about">
                            <template v-if="locale == 'ru'">
                                <p><center>Аудиотека</center></p>
                                <p><center>&copy; Александр Чебыкин, 2019-2022</center></p>
                                <p><center>Опубликовано под лицензией <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a></center></p>
                                <p><center>Git: <a href="https://www.cainet.info/git/cai/AudioLib" target="_blank">https://home.cainet.info/git/cai/AudioLib</a></center></p>
                            </template>
                            <template v-else>
                                <p><center>Audiobooks library</center></p>
                                <p><center>&copy; Alexander I Chebykin, 2019-2022</center></p>
                                <p><center>Published under <a href="https://opensource.org/licenses/MIT" target="_blank">MIT license</a></center></p>
                                <p><center>Git: <a href="https://www.cainet.info/git/cai/AudioLib" target="_blank">https://www.cainet.info/git/cai/AudioLib</a></center></p>
                            </template>
                        </v-window-item>
                    </v-window>
                </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,
                activeTab:    0,
                autoBookmark: false,
                darkTheme:    false,
                locale:       "en",
                playbackRate: 1,
            }
        },

        watch: {
            dialog (val) {
                if (val) {
                    this.autoBookmark = this.$store.getters.autoBookmark;
                    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); },
            darkTheme (val)    { this.$store.commit("setDarkTheme", val); },
            playbackRate (val) { this.$store.commit("setPlaybackRate", val); }
        }
    }
</script>
