<template>
  <v-dialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    width="560"
    persistent
  >
    <v-card max-height="85vh" class="d-flex flex-column">
      <v-toolbar color="grey-darken-3" class="flex-grow-0">
        <v-toolbar-title class="text-subtitle-1 font-weight-bold text-white text-uppercase">
          {{ form?.formType }}
        </v-toolbar-title>
      </v-toolbar>

      <v-card-subtitle class="px-6 pt-3 pb-0 text-caption text-medium-emphasis flex-grow-0">
        Form preview — fields are read-only
      </v-card-subtitle>

      <v-card-text class="px-6 py-4 flex-grow-1" style="overflow-y: auto">
        <template v-for="(input, index) in form?.inputs" :key="index">
          <v-text-field
            v-if="input.dataType === 'Text Input'"
            :label="input.label"
            density="comfortable"
            variant="outlined"
            class="mb-1"
            :hint="input.required ? 'Required' : ''"
            persistent-hint
            readonly
          />
          <v-textarea
            v-else-if="input.dataType === 'Text Area'"
            :label="input.label"
            density="comfortable"
            variant="outlined"
            rows="3"
            class="mb-1"
            :hint="input.required ? 'Required' : ''"
            persistent-hint
            readonly
          />
          <v-text-field
            v-else-if="input.dataType === 'Date Input'"
            :label="input.label"
            type="date"
            density="comfortable"
            variant="outlined"
            class="mb-1"
            :hint="input.required ? 'Required' : ''"
            persistent-hint
            readonly
          />
          <v-select
            v-else-if="input.dataType === 'Select'"
            :label="input.label"
            :items="input.options || []"
            density="comfortable"
            variant="outlined"
            class="mb-1"
            :hint="input.required ? 'Required' : ''"
            persistent-hint
            readonly
          />
          <v-checkbox
            v-else-if="input.dataType === 'Checkbox'"
            :label="input.label"
            density="comfortable"
            class="mb-1"
            readonly
          />
        </template>
      </v-card-text>

      <v-toolbar density="compact" class="flex-grow-0">
        <v-row no-gutters>
          <v-col cols="12">
            <v-btn
              tile
              block
              variant="flat"
              color="black"
              class="text-none"
              height="48"
              @click="$emit('update:modelValue', false)"
            >
              Close Preview
            </v-btn>
          </v-col>
        </v-row>
      </v-toolbar>
    </v-card>
  </v-dialog>
</template>
<script setup lang="ts">
defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  form: {
    type: Object as PropType<TOnlineForm | null>,
    default: null,
  },
});

defineEmits(["update:modelValue"]);
</script>
