<template>
  <v-card-text>
    <v-row>
      <v-col cols="12" md="4" class="mt-2">
        <InputLabel class="font-weight-bold" title="Name" />
        <v-text-field :model-value="person.name" density="compact" :readonly="readOnly"
          :class="{ 'no-pointer': readOnly }" />
      </v-col>

      <v-col cols="12" md="4" class="mt-2">
        <InputLabel class="font-weight-bold" title="Email Address" />
        <v-text-field :model-value="person.email" density="compact" :readonly="readOnly"
          :class="{ 'no-pointer': readOnly }" />
      </v-col>

      <v-col cols="12" md="4" class="mt-2">
        <InputLabel class="font-weight-bold" title="NRIC" />
        <v-text-field :model-value="person.nric" density="compact" :readonly="readOnly"
          :class="{ 'no-pointer': readOnly }" />
      </v-col>

      <v-col cols="12" md="4" class="mt-2">
        <InputLabel class="font-weight-bold" title="Mobile Number" />
        <v-text-field :model-value="person.contact" density="compact" :readonly="readOnly"
          :class="{ 'no-pointer': readOnly }" />
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" md="4" class="mt-2">
        <InputLabel class="font-weight-bold" title="Other Documents and Files" :viewMode="readOnly" />

        <p v-if="!person.files?.length" class="text-blue-darken-2 font-weight-thin text-caption ml-2 mt-5">
          **No documents to display**
        </p>
        <v-list v-else dense nav class="mt-2">
          <v-list-item v-for="file in person.files" :key="file.id" class="text-blue-darken-2"
            :href="getFileUrl(file.id)" target="_blank">
            <v-list-item-content>
              <v-list-item-title class="d-flex align-center">
                <span>
                  <v-icon size="18" class="mr-1">mdi-file-document-outline</v-icon>
                </span>
                <span> {{ file.name }}</span>
              </v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>

      </v-col>

      <v-col cols="0" md="4"></v-col>
      <v-col v-if="prop.showOwnerOption" cols="12" md="4">
        <v-checkbox :model-value="person.isOwner" readonly hide-details density="compact" @click="handleClick">
          <template #label>
            <span class="font-weight-bold text-subtitle-2 ml-2">Is Owner?</span>
          </template>
        </v-checkbox>

        <span class="d-flex text-caption text-gray-5 ml-7">As owner, you will be receiving emails and updates
                related to this unit.</span>
      </v-col>
    </v-row>

    <v-dialog v-model="dialog.showPrompt" persistent width="540">
      <DialogReusablePrompt :loading="loadingOwnerProcessing"
        :prompt-title="`Are you sure want to ${person.isOwner ? 'remove' : 'add'} (${person.name}) as owner ?`"
        @proceed="handleApprove(person)" @close="dialog.showPrompt = false" />
    </v-dialog>
  </v-card-text>
</template>

<script setup lang="ts">
import useFile from '../composables/useFile';

const prop = defineProps({
  person: {
    type: Object as PropType<TPeople>,
    required: true,
  },
  readOnly: {
    type: Boolean,
    default: false,
  },
  showOwnerOption: {
    type: Boolean,
    default: false,
  },
  loadingOwnerProcessing: {
    type: Boolean,
    default: false,
  }
})

const { getFileUrl } = useFile()

const emit = defineEmits(['update:owner'])


const dialog = reactive({
  showPrompt: false,
})





const handleApprove = (person: TPeople) => {
  dialog.showPrompt = false;
  emit('update:owner', { person, isOwner: !person.isOwner })
}

const handleClick = () => {
  dialog.showPrompt = true;
}

</script>

<style lang="scss" scoped>
.no-pointer {
  pointer-events: none;
}
</style>