<template>
  <div class="text-h2 flex flex-center">
    <q-card class="q-gutter-md">
      <p class="text-center text-bold text-h3 text-primary q-pt-md">{{ $t('settings') }}</p>

      <div>
        <q-card class="q-ma-lg">
          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
          <div class="row">
            <q-input
              :class="[
                colorGroup ? 'col-md-4' : 'col-md-3',
                colorGroup ? 'col-md-6' : 'col-md-6',
                colorGroup ? 'col-md-4' : 'col-md-12',
                'q-pa-md',
              ]"
              filled
              :label="$t('icon')"
              v-model="settings.icon"
            ></q-input>
          </div>
        </q-card>
        <q-card class="q-ma-lg">
          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('database') }}</p>
          <div class="row">
            <q-input
              :class="[
                colorGroup ? 'col-md-4' : 'col-md-3',
                colorGroup ? 'col-md-6' : 'col-md-6',
                colorGroup ? 'col-md-4' : 'col-md-12',
                'q-pa-md',
              ]"
              filled
              :label="$t('databaseName')"
              v-model="settings.databaseName"
            ></q-input>
          </div>
        </q-card>
        <q-card class="q-ma-lg">
          <q-btn
            class="q-pa-md"
            :icon="colorGroup ? 'remove' : 'add'"
            size="md"
            dense
            no-caps
            color="primary"
            flat
            @click="colorGroup = !colorGroup"
            >{{ $t('colors') }}</q-btn
          >
          <div v-if="colorGroup" class="colum">
            <div class="row">
              <div class="col-12 col-sm-6 col-md-3 q-px-md">
                <p class="text-center text-bold text-h6 text-primary">{{ $t('primaryColor') }}</p>
                <q-color bordered class="q-mx-md" v-model="settings.primaryColor"></q-color>
              </div>
              <div class="col-12 col-sm-6 col-md-3 q-px-md">
                <p class="text-center text-bold text-h6 text-secondary">
                  {{ $t('secondaryColor') }}
                </p>
                <q-color class="q-mx-md" v-model="settings.secondaryColor"></q-color>
              </div>
            </div>
            <q-btn class="q-my-md q-mx-md" color="secondary" dense no-caps @click="resetColors">{{
              $t('resetColors')
            }}</q-btn>
          </div>
        </q-card>
        <div class="row justify-end">
          <div class="q-my-lg q-mr-xl">
            <q-btn no-caps color="primary" @click="save">{{ $t('save') }}</q-btn>
          </div>
        </div>
      </div>
    </q-card>
  </div>
</template>

<script setup lang="ts">
import { databaseName } from 'src/vueLib/tables/members/MembersTable';
import { Logo } from 'src/vueLib/models/logo';
import { reactive, ref, watch } from 'vue';
import { appApi } from 'src/boot/axios';
import { useNotify } from 'src/vueLib/general/useNotify';
import { type Settings } from 'src/vueLib/models/settings';

const { NotifyResponse } = useNotify();
const colorGroup = ref(false);

const settings = reactive<Settings>({
  icon: Logo.value,
  databaseName: databaseName.value,
  primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
  secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
});

watch(settings, (newSettings) => {
  Logo.value = newSettings.icon;
  databaseName.value = newSettings.databaseName;
});

function resetColors() {
  document.documentElement.style.setProperty('--q-primary', '#1976d2');
  document.documentElement.style.setProperty('--q-secondary', '#26a69a');
}

function save() {
  document.documentElement.style.setProperty('--q-primary', settings.primaryColor);
  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor);
  Logo.value = settings.icon;
  localStorage.setItem('icon', settings.icon);
  localStorage.setItem('databaseName', settings.databaseName);
  localStorage.setItem('primaryColor', settings.primaryColor);
  localStorage.setItem('secondaryColor', settings.secondaryColor);

  appApi
    .post('secure/settings/update', { user: 'admin', settings })
    .then((resp) => NotifyResponse(resp.data.message))
    .catch((err) => NotifyResponse(err, 'error'));
}
</script>
