<template>
<input v-model="name" type="text" class="mb-3 form-control" placeholder="Name" aria-label="name" />
<ColorPicker v-model="color" />
<hr>
<div class="d-flex flex-row align-items-center">
  <label v-if="name">Preview:</label>
  <span class="fw-bold ms-1" :style="{ color: color ?? '#000000' }">{{ name }}</span>
  <button @click="save" class="btn btn-primary ms-auto">Save</button>
</div>
</template>

<script setup>
import { inject, ref } from 'vue'
import { useMercuryStore } from '../../stores/mercuryStore'
import Colors from '../../common/colors'
import ColorPicker from './ColorPicker.vue'

const requestUserData = inject('requestUserData')
const mercuryStore = useMercuryStore()

const name = ref()
const color = ref(Colors.Random())

// Set initial username.
if (mercuryStore.user?.name) {
  name.value = mercuryStore.user.name
}

// Set initial color.
if (mercuryStore.user?.color) {
  color.value = mercuryStore.user.color
}

function save() {
  mercuryStore.setUserName(name.value)
  mercuryStore.setUserColor(color.value)
  requestUserData()
}
</script>
