<script setup lang="ts">
import { useAuthStore } from '@/stores/auth.store.ts'; // Adjust the import path to your store
import { storeToRefs } from 'pinia';
import { ref } from 'vue';

const authStore = useAuthStore();
const { userData } = storeToRefs(authStore);

const emit = defineEmits([
  'userProfilePage'
])

// Sample data for selection components
const roles = ['Admin', 'User', 'Editor'];
const timezones = [
  'UTC',
  'America/New_York',
  'America/Chicago',
  'America/Denver',
  'America/Los_Angeles',
  'Europe/London',
  'Europe/Berlin',
  'Asia/Tokyo',
];

const form = ref(null);

const saveUser = async () => {
  await authStore.updateUser();
};

</script>

<template>
  <v-form ref="form">
    <v-container>
      <v-row>
        <v-col cols="12" md="6">
          <v-text-field
              v-model="userData.login"
              label="Login"
              required
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
              v-model="userData.firstName"
              label="First Name"
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="6">
          <v-text-field
              v-model="userData.lastName"
              label="Last Name"
          ></v-text-field>
        </v-col>

        <v-col cols="12" md="6">
          <v-autocomplete
              v-model="userData.timezone"
              :items="timezones"
              label="Timezone"
          ></v-autocomplete>
        </v-col>

      <v-col cols="12" md="6">
        <v-text-field
            v-model="userData.email"
            label="email"
        ></v-text-field>
      </v-col>

        <v-col cols="12" md="6">
          <v-text-field
              v-model="userData.cellPhone"
              label="cellPhone"
          ></v-text-field>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-btn color="primary" @click="saveUser">
            Salva
          </v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>