<script setup>
import { ref } from "vue";
import { q, m, useLight, useRoute } from "#imports";
import { useQuasar } from "quasar";
const route = useRoute();
const tab = ref("general");
const $q = useQuasar();
if (route.query.mail_driver == "gmail" && route.query.refresh_token) {
  await m("updateAppConfigs", {
    data: [
      { name: "mail_driver", value: "gmail" },
      { name: "mail_google_refresh_token", value: route.query.refresh_token }
    ]
  });
  tab.value = "mail";
  window.history.replaceState({}, document.title, window.location.pathname);
  $q.notify({ message: "Gmail account added", color: "positive" });
}
const light = useLight();
const { app } = await q({ app: { config: { name: true, value: true } } });
const obj = app.config.reduce((acc, cur) => {
  acc[cur.name] = cur.value;
  return acc;
}, {});
const onSubmit = async (d) => {
  let data = [];
  Object.keys(d).forEach((key) => {
    data.push({
      name: key,
      value: d[key]
    });
  });
  await m("updateAppConfigs", { data });
  light.notify({ message: "Settings saved", color: "positive" });
  Object.keys(d).forEach((key) => {
    obj[key] = d[key];
  });
};
</script>

<template>
    <l-page>

        <l-card>
            <q-splitter unit="px" :model-value="145">
                <template #before>
                    <q-tabs v-model="tab" vertical>
                        <q-tab name="general" icon="sym_o_info" :label="$t('General')" />
                        <q-tab name="security" icon="sym_o_security" :label="$t('Security')" />
                        <q-tab name="modules" icon="sym_o_apps" :label="$t('Modules')" />
                        <q-tab name="mail" icon="sym_o_email" :label="$t('Mail')" />
                        <q-tab name="forget-password" icon="sym_o_lock" :label="$t('Forget password')" />
                        <q-tab name="authentication" icon="sym_o_passkey" :label="$t('Authentication')" />
                        <q-tab name="developer" icon="sym_o_code" :label="$t('Developer')" />
                        <q-tab name="logs" icon="sym_o_event_note" :label="$t('Logs')" />
                    </q-tabs>
                </template>
                <template #after>
                    <l-system-setting-general v-if="tab == 'general'" v-bind="obj" @submit="onSubmit" />
                    <l-system-setting-mail v-if="tab == 'mail'" v-bind="obj" @submit="onSubmit" />
                    <l-system-setting-security v-if="tab == 'security'" v-bind="obj" @submit="onSubmit" />
                    <l-system-setting-modules v-if="tab == 'modules'" v-bind="obj" @submit="onSubmit" />
                    <l-system-setting-developer v-if="tab == 'developer'" v-bind="obj" @submit="onSubmit" />
                    <l-system-setting-forget-password v-if="tab == 'forget-password'" v-bind="obj" @submit="onSubmit" />
                    <l-system-setting-authentication v-if="tab == 'authentication'" v-bind="obj" @submit="onSubmit" />
                    <l-system-setting-logs v-if="tab == 'logs'" />

                </template>
            </q-splitter>
        </l-card>
    </l-page>
</template>
