<template>
  <div>
    <AppHeader title="Preferences" secondary />

    <form class="flex flex-col gap-3 p-3" @submit.prevent="save">
      <PrimeFloatLabel variant="on">
        <PrimeInputText id="username" v-model="localUsername" size="large" class="w-full" />
        <label for="username">Username</label>
      </PrimeFloatLabel>

      <PrimeButton label="Save" type="submit" :disabled="!localUsername || localUsername === username" />
    </form>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  name: 'Preferences',
})

const signaling = useSignaling()
const { username } = usePreferences()
const toast = useToast()

const localUsername = ref(username.value)

async function save() {
  if (!localUsername.value || localUsername.value === username.value)
    return

  username.value = localUsername.value

  await signaling.socket.value?.emitWithAck('updateClient', {
    username: username.value,
  })

  toast.add({ severity: 'success', summary: 'Saved', life: 1000, closable: false })
}
</script>
