<template>
  <v-card width="100%" :loading="processing">
    <v-toolbar>
      <v-row
        no-gutters
        class="fill-height px-6 d-flex justify-space-between align-center"
        align="center"
      >
        <span class="font-weight-bold text-h5 text-capitalize">
          Visitor Information
        </span>
        <ButtonClose @click="emit('close')" />
      </v-row>
    </v-toolbar>
    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-5 my-3">
      <div class="w-100 d-flex justify-space-between ga-2">
        <!-- <span v-if="withStep2 || withStep3" class="text-subtitle-2 font-weight-bold" style="text-wrap: nowrap">Step
          <span class="text-primary-button">{{ contractorStep }}</span>/{{ withStep3 ? 3 : withStep2 ? 2 : 1 }}</span> -->
      </div>
      <!-- <v-form ref="formRef" v-model="validForm" :disabled="processing" @click="errorMessage = ''"> -->
      <v-row no-gutters class="pt-4">
        <v-col cols="12">
          <InputLabel class="text-capitalize" title="Full Name" />
          <v-text-field
            v-model="visitorInfo.name"
            density="comfortable"
            readonly
          />
        </v-col>

        <v-col v-if="!visitorInfo.checkIn" cols="12">
          <InputLabel class="text-capitalize" title="NRIC/Passport/ID No." />
          <v-text-field
            v-if="!visitorInfo.checkIn"
            v-model="visitorInfo.nric"
            density="comfortable"
            hide-details
            clearable
          />
          <v-text-field
            v-else
            v-model="visitorNric"
            density="comfortable"
            hide-details
            readonly
          />
        </v-col>

        <v-col v-if="!visitorInfo.checkIn" cols="12" class="mt-4">
          <InputLabel
            class="text-capitalize"
            title="Vehicle Number (Optional)"
          />
          <InputVehicleNumber
            v-if="!visitorInfo.checkIn"
            v-model="visitorInfo.plateNumber"
            density="comfortable"
            hide-details
            clearable
          />
          <InputVehicleNumber
            v-else
            v-model="visitorPlateNumber"
            density="comfortable"
            hide-details
            readonly
          />
        </v-col>

        <!-- <v-col cols="12" class="mt-4">
          <InputLabel class="text-capitalize" title="Type" />
          <v-text-field
            v-model="visitorInfo.type"
            density="comfortable"
            hide-details
            readonly
          />
        </v-col> -->

        <v-col v-if="!visitorInfo.checkIn" cols="12" class="mt-4">
          <InputLabel class="text-capitalize" title="Phone Number" />
          <InputPhoneNumberV2
            v-model="visitorInfo.contact"
            density="comfortable"
            :readonly="true"
          />
        </v-col>

        <v-col cols="12">
          <InputLabel class="text-capitalize" title="Location" />
          <v-text-field v-model="location" density="comfortable" readonly />
        </v-col>

        <v-col v-if="!visitorInfo.checkIn" cols="12">
          <InputLabel class="text-capitalize" title="Purpose" />
          <v-textarea
            v-model="visitorInfo.purpose"
            density="comfortable"
            :rows="2"
            no-resize
            readonly
          />
        </v-col>

        <v-col v-if="!visitorInfo.checkIn" cols="12">
          <InputLabel class="text-capitalize" title="Remarks" />
          <v-textarea
            v-model="visitorInfo.remarks"
            density="comfortable"
            :rows="2"
            no-resize
          />
        </v-col>

        <v-col v-if="!visitorInfo.checkIn" cols="12">
          <InputLabel class="text-capitalize" title="Visitor Pass" />
          <PassInformation
            v-model:pass="visitorInfo.visitorPass"
            :site="prop.site"
            :type="visitorInfo.type"
            :hideKeys="true"
            :clearable="true"
          />
        </v-col>

        <v-col v-else cols="12">
          <v-card elevation="4" height="100%" width="100%">
            <v-col cols="12" class="d-flex justify-center pb-0">
              <span
                class="text-h6 font-weight-bold d-flex text-center text-success"
              >
                {{
                  visitorInfo.checkIn
                    ? standardFormatDateTime(visitorInfo.checkIn)
                    : "N/A"
                }}
              </span>
            </v-col>
            <v-col cols="12" class="d-flex justify-center">
              Actual Check In
            </v-col>
          </v-card>
        </v-col>

        <!-- <v-col cols="12" class="mt-4">
          <v-row no-gutters class="pt-2">
            <v-col cols="6" class="pr-1">
              <v-card elevation="3" height="100%" width="100%">
                <v-col cols="12" class="d-flex justify-center pb-0">
                  <span
                    class="text-h6 font-weight-bold d-flex text-center text-success"
                  >
                    {{
                      visitorInfo.checkIn
                        ? standardFormatDateTime(visitorInfo.checkIn)
                        : "N/A"
                    }}
                  </span>
                </v-col>
                <v-col cols="12" class="d-flex justify-center">
                  Actual Check In
                </v-col>
              </v-card>
            </v-col>
            <v-col cols="6" class="pl-1">
              <v-card elevation="3" height="100%" width="100%">
                <v-col cols="12" class="d-flex justify-center pb-0">
                  <span
                    class="text-h6 font-weight-bold d-flex text-center text-error"
                  >
                    {{
                      visitorInfo.checkOut
                        ? standardFormatDateTime(visitorInfo.checkOut)
                        : "N/A"
                    }}
                  </span>
                </v-col>
                <v-col cols="12" class="d-flex justify-center">
                  Actual Check Out
                </v-col>
              </v-card>
            </v-col>
          </v-row>
        </v-col> -->
      </v-row>
      <!-- </v-form> -->
    </v-card-text>

    <v-toolbar density="compact">
      <v-row no-gutters>
        <v-col cols="6">
          <v-btn text="Close" block size="48" tile @click="emit('close')" />
        </v-col>
        <v-col cols="6">
          <v-btn
            v-if="!visitorInfo.checkIn && !visitorInfo.checkOut"
            block
            text="Check In"
            variant="flat"
            color="success"
            size="48"
            tile
            :disabled="processing"
            @click="emit('check-in-out', 'checkIn', visitorInfo)"
            :loading="processing"
          />
          <v-btn
            v-if="visitorInfo.checkIn && !visitorInfo.checkOut"
            block
            text="Confirm Check Out"
            variant="flat"
            color="error"
            size="48"
            tile
            :disabled="processing"
            @click="emit('check-in-out', 'checkOut', visitorInfo)"
            :loading="processing"
          />
        </v-col>
      </v-row>
    </v-toolbar>
  </v-card>
</template>
<script setup lang="ts">
const prop = defineProps({
  site: {
    type: String,
    required: true,
  },
  visitorData: {
    type: Object as PropType<Partial<TVisitor>>,
    default: {},
  },
  processing: {
    type: Boolean,
    required: false,
  },
});

const emit = defineEmits(["check-in-out", "close"]);

const { standardFormatDateTime } = useUtils();

const visitorInfo = ref(prop.visitorData);

const visitorNric = computed({
  get: () =>
    visitorInfo.value && visitorInfo.value.checkIn
      ? visitorInfo.value.nric
      : null,
  set: () => {}, // readonly, do nothing on set
});

const visitorPlateNumber = computed({
  get: () =>
    visitorInfo.value && visitorInfo.value.checkIn
      ? visitorInfo.value.plateNumber
      : null,
  set: () => {}, // readonly, do nothing on set
});

// watchEffect(() => {
//   if (visitorInfo.value.plateNumber) {
//     visitorInfo.value.type = "guest";
//   } else {
//     visitorInfo.value.type = "walk-in";
//   }
// });

const location = computed({
  get: () => {
    if (
      visitorInfo.value &&
      visitorInfo.value.block &&
      visitorInfo.value.level &&
      visitorInfo.value.unitName
    ) {
      return `${visitorInfo.value.block} / ${visitorInfo.value.level} / ${visitorInfo.value.unitName}`;
    } else if (
      visitorInfo.value &&
      visitorInfo.value.block &&
      !visitorInfo.value.level &&
      !visitorInfo.value.unitName
    ) {
      return visitorInfo.value.block;
    } else {
      return "N/A";
    }
  },
  set: () => {}, // readonly, do nothing on set
});
</script>
