<template>
  <div class="q-pa-lg">
    <q-card flat bordered class="shadow-2" style="max-width:600px; margin: 0 auto; border-radius:12px;">
      <q-card-section>
        <div class="text-h6">User Settings</div>

        <div class="text-subtitle2 text-black">
          Username: <span class="text-subtitle2 text-grey">{{ user.username }}</span>
        </div>
        <div class="text-subtitle2 text-black">
          ID: <span class="text-subtitle2 text-grey">{{ user.id }}</span>
        </div>
      </q-card-section>

      <q-separator />

      <q-card-section>
        <div class="q-gutter-md">

            <div class="text-h8">Input method</div>

            <q-btn-dropdown color="primary" :label="selected">
                <q-list>
                  <q-item
                    v-for="opt in options"
                    :key="opt"
                    clickable
                    v-close-popup
                    @click="selectOption(opt)"
                  >
                    <q-item-section>
                      <q-item-label>{{ opt }}</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-list>
            </q-btn-dropdown>

            <div class="text-h8">Dart Picker Offset</div>
            <div class="text-h8">Dart Picker Darts Colours</div>
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat label="Cancel" @click="resetForm" />
        <q-btn color="primary" label="Save changes" unelevated @click="onSave" />
      </q-card-actions>
    </q-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useQuasar, LocalStorage } from 'quasar'
import { useRouter } from 'vue-router'

const router = useRouter()
const $q = useQuasar();
const options = ['Dart Picker', 'Numbers']
const selected = ref('Input method')
const user = ref({ username:"", id:0 });

const storedUser = LocalStorage.getItem("user")
if (storedUser) {
    console.log(storedUser)
    user.value = storedUser
} else {
    router.push("/user/username")
}

function selectOption(opt) {
  selected.value = opt
}

function resetForm () {
  $q.notify({ message: 'Changes discarded', color: 'negative' })
}

function onSave () {
  $q.notify({ message: 'Settings saved', color: 'positive' })
}
</script>