<template>
  <v-card width="100%">
    <v-toolbar>
      <v-row no-gutters class="fill-height px-6" align="center">
        <span class="font-weight-bold text-h5 text-capitalize">
          {{ mode }} Visitor
        </span>
      </v-row>
    </v-toolbar>

    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-5">
      <span class="text-subtitle-2 w-100 font-weight-medium d-flex justify-center mb-3">Please Select Visitor Type</span>
      <template v-for="item in selection" :key="item.value">
        <v-btn v-if="showSelection(item)" color="primary-button" block variant="flat" rounded="md" size="48" :text="item.label" @click="select(item.value)" class="my-2 text-capitalize text-subtitle-2" />
      </template>
    </v-card-text>

    <v-toolbar density="compact">
      <v-row no-gutters>
        <v-col cols="12">
          <v-btn
            tile
            block
            variant="text"
            class="text-none"
            size="48"
            @click="cancel"
          >
            Cancel
          </v-btn>
        </v-col>
      </v-row>
    </v-toolbar>
  </v-card>
</template>

<script setup lang="ts">
const prop = defineProps({
  mode: {
    type: String as PropType<"add" | "edit" | "register">,
    default: "add",
  }
});

const emit = defineEmits(['cancel', 'select']);
const { visitorSelection: selection} = useVisitor();



function cancel() {
  emit("cancel");
}

function select(value: string) {
  emit("select", value);
}

function showSelection(item: any) {
  if(item.value === 'walk-in' && prop.mode === 'register') {
    return false ;
  } return true;
  
}
</script>
