<script setup>
import { ref } from "vue";
const menuWidth = defineModel("menuWidth", {
  type: Number,
  default: 280
});
const COLORS = [
  "red",
  "pink",
  "purple",
  "deep-purple",
  "indigo",
  "blue",
  "light-blue",
  "cyan",
  "teal",
  "green",
  "light-green",
  "lime",
  "yellow",
  "amber",
  "orange",
  "deep-orange",
  "brown",
  "grey",
  "blue-grey"
];
defineEmits(["update:theme", "update:menuOverlayHeader", "update:dense", "update:color", "update:miniState", "update:footer"]);
const props = defineProps({
  time: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "primary"
  },
  menuOverlayHeader: {
    type: Boolean,
    default: false
  },
  theme: {
    type: String,
    default: "semi-dark"
  },
  miniState: {
    type: Boolean,
    default: false
  },
  dense: {
    type: Boolean,
    default: false
  },
  footer: {
    type: Boolean,
    default: false
  }
});
const time_diff = ref((/* @__PURE__ */ new Date()).getTime() - new Date(props.time).getTime());
const server_time = ref(new Date(props.time).toLocaleTimeString());
const server_date = ref(new Date(props.time).toLocaleDateString());
let start;
const refreshServerTime = (timestamp) => {
  if (!start) start = timestamp;
  let elapsed = timestamp - start;
  if (elapsed > 1e3) {
    server_time.value = new Date((/* @__PURE__ */ new Date()).getTime() - time_diff.value).toLocaleTimeString();
    server_date.value = new Date((/* @__PURE__ */ new Date()).getTime() - time_diff.value).toLocaleDateString();
    start = timestamp;
  }
  requestAnimationFrame(refreshServerTime);
};
requestAnimationFrame(refreshServerTime);
</script>

<template>
    <q-list>
        <q-item-label header>
            <q-item-label>{{ $t('Theme Customizer') }}</q-item-label>
            <q-item-label caption>
                {{ $t('Customize &amp; Preview in Real Time') }}
            </q-item-label>
        </q-item-label>
        <q-separator />
        <q-item>
            <q-item-section>
                <q-item-label>Skin</q-item-label>
                <div class="q-gutter-sm">
                    <q-radio :model-value="theme" val="light" label="Light"
                        @update:model-value="$emit('update:theme', $event)" />
                    <q-radio :model-value="theme" val="dark" label="Dark"
                        @update:model-value="$emit('update:theme', $event)" />
                    <q-radio :model-value="theme" val="semi-dark" label="Semi dark"
                        @update:model-value="$emit('update:theme', $event)" />
                </div>
            </q-item-section>
        </q-item>
        <q-separator />
        <q-item>
            <q-item-section>
                <q-item-label>{{ $t('Color') }}</q-item-label>
                <div class="row">
                    <div style="background-color: #7367f0; width: 1.5rem; height: 1.5rem;"
                        class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', '')" />

                    <div v-for="c in COLORS" :key="c" :class="`bg-${c}`" style="width: 1.5rem; height: 1.5rem;"
                        class="q-ma-xs cursor-pointer rounded-borders" @click="$emit('update:color', c)" />
                </div>
            </q-item-section>
        </q-item>
        <q-separator />
        <q-item>
            <q-item-section>
                <q-item-label>{{ $t('Mini mode') }}</q-item-label>
            </q-item-section>
            <q-item-section side>
                <q-toggle :model-value="miniState" @update:model-value="$emit('update:miniState', $event)" />
            </q-item-section>
        </q-item>
        <q-separator />

        <q-item>
            <q-item-section>
                <q-item-label>Menu dense mode</q-item-label>
            </q-item-section>
            <q-item-section side>
                <q-toggle :model-value="dense" @update:model-value="$emit('update:dense', $event)" />
            </q-item-section>
        </q-item>

        <q-separator />

        <q-item>
            <q-item-section>
                <q-item-label>Menu overlay header</q-item-label>
            </q-item-section>
            <q-item-section side>
                <q-toggle :model-value="menuOverlayHeader"
                    @update:model-value="$emit('update:menuOverlayHeader', $event)" />
            </q-item-section>
        </q-item>

        <q-separator />

        <q-item>
            <q-item-section>
                <q-item-label>{{ $t('Show footer') }}</q-item-label>
            </q-item-section>
            <q-item-section side>
                <q-toggle :model-value="footer" @update:model-value="$emit('update:footer', $event)" />
            </q-item-section>
        </q-item>
        <q-separator />
        <q-item>
            <q-item-section>
                <q-item-label>{{ $t('Menu width') }}</q-item-label>
                <q-item-label><q-slider v-model="menuWidth" :min="200" :max="360" label /></q-item-label>
            </q-item-section>
        </q-item>
        <q-separator />

        <q-item>
            <q-item-section>
                <q-item-label>{{ $t('Server time') }}</q-item-label>
            </q-item-section>
            <q-item-section side>
                <q-item-label>{{ server_date }} {{ server_time }} </q-item-label>
            </q-item-section>
        </q-item>

    </q-list>
</template>
