<template>
  <v-card width="100%">
    <v-toolbar>
      <v-row no-gutters>
        <v-col cols="12" class="text-h6 font-weight-bold px-3">Vehicle Number ({{ vehicleNumber }})</v-col>
      </v-row>
    </v-toolbar>

    <v-card-text style="max-height: 100vh; overflow-y: auto">
      <v-data-table :items="prop.vehicleNumberUsersList" hide-default-footer :headers="headers" density="comfortable" 
        item-key="_id ">
        <template #item.name="{ item }">
          <span class="d-flex align-center ga-2">
            <span>
              <AvatarMain :name="item?.name" :size="20" :id="item?._id" />
            </span>
            <span class="text-capitalize">{{ item?.name }}</span>
          </span>
        </template>

        <template #item.actions="{ item }">
          <v-btn text="Select" rounded="md" flat color="blue" density="comfortable" :ripple="false" @click="handleSelectUser(item)" />
        </template>
      </v-data-table>
    </v-card-text>

    <v-toolbar class="pa-0" density="compact">
      <v-row no-gutters>
        <v-col cols="6" class="pa-0">
          <v-btn block variant="text" class="text-none" size="large" @click="emit('close')" height="48">
            Close
          </v-btn>
        </v-col>

        <v-col cols="6" class="pa-0">
          <v-btn block variant="flat" color="black" class="text-none" height="48" tile @click="emit('close')">
            Add Different User
          </v-btn>
        </v-col>
      </v-row>
    </v-toolbar>
    <v-dialog v-model="confirmAction" persistent max-width="450">
      <DialogReplaceAutofillPrompt  @close="confirmAction = false" @proceed="handleUpdateUserDetails"/>
    </v-dialog>
  </v-card>
</template>

<script setup lang="ts">

const prop = defineProps({
  vehicleNumber: {
    type: String,
    required: true
  },
  vehicleNumberUsersList: {
    type: Array as PropType<TPeople[]>,
    default: [{
      _id: "12312423534",
      name: "Percy Jackson",
      nric: "HS12356"
    }]
  }
});

const confirmAction = ref(false)
const selectedPeople = ref<TPeople | null>(null)

const headers = [
  { title: "Name", value: "name" },
  { title: "NRIC", value: "nric" },
  { title: "Actions", value: "actions" },
];

const emit = defineEmits(["close", "update:people"]);

function handleSelectUser(item: TPeople){
  selectedPeople.value = item
  confirmAction.value = true
}

function handleUpdateUserDetails(){
  confirmAction.value = false;
  emit('update:people', selectedPeople.value)
  emit('close')
}

onMounted(() => {
  selectedPeople.value = null
})
</script>

<style scoped></style>
