<template>
    <div class="settings">
        <div class="section">
            <h1>Wallpaper</h1>
            <h2>Upload a background wallpaper</h2>
            <input ref="bg_file" type="file"/>
            <div class="actions">
                <btn label="Update"  @click="uploadBg" />
            </div>
        </div>
        <div class="section">
            <h1>Theme</h1>
            <h2>Select light or dark mode to match the wallpaper</h2>
            <switch-field v-model="darkMode" label="Darkmode" />
            <div class="actions">
                <btn label="Update"  @click="updateMode" />
            </div>
        </div>
        <div class="control-buttons">
            <btn primary label="Back to Dashboard" @click="backClicked" />
        </div>
    </div>
</template>

<script>
import Btn from "../components/Button.vue";
import SwitchField from "../components/Switch.vue";
import axios from "axios";

export default {
    components: { Btn, SwitchField },
    data() {
        return {
            file: "",
            darkMode: true,
        }
    },
    async mounted() {
      this.darkMode = ((await axios.get("/api/settings/theme/mode")).data.mode || "dark") === "dark";
    },
    methods: {
         async uploadBg() {
             let formData = new FormData();
             formData.append("file", this.$refs.bg_file.files[0]);
             await axios.post("/api/upload/bg", formData, {
                 headers: {'content-type': 'multipart/form-data'}
             });
         },
        async updateMode() {
            await axios.put("/api/settings/theme/mode", {
                 mode: this.darkMode ? "dark" : "light"
            });
        },
        backClicked() {
            this.$router.push("/");
        }
    }
}
</script>

<style scoped>
 .settings {
     padding-top: 100px;
     min-height: calc(100vh - 100px);
     background: #222;
}
 .section {
     width: 800px;
     margin: auto auto;
     border-radius: 5px;
     background: #121212;
     padding: 15px;
}
.section + .section {
    margin-top: 25px;
}
 .section h1 {
     font-size: 24px;
     font-weight: 700;
     line-height: 24px;
     margin: 0;
}
.section h2 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 35px;
}
.actions {
    margin-top: 15px;
    text-align: right;
}
.control-buttons {
    width: 800px;
    margin: auto auto;
    margin-top: 15px;
    text-align: right;
}
</style>
