<template>
  <FormDialog v-model="dialog" @close="closeDialog">
    <template #title>
      <span class="text-h6 font-weight-medium pt-1 text-capitalize">
        {{ isEditMode ? "Edit Feedback" : "Create Feedback" }}
      </span>
    </template>

    <InputFile
      :attachments="displayedAttachments"
      :errored-images="localErroredImages"
      :max-files="maxFiles"
      @add="handleFileAdded"
      @delete="deleteFile"
      @errored="onImageError"
    />

    <v-autocomplete
      v-model="localFeedback.subject"
      :items="subjects"
      item-title="title"
      item-value="value"
      item-props
      variant="outlined"
      density="compact"
      class="mb-2"
      clearable
      :custom-filter="customFilter"
      :rules="[requiredRule]"
    >
      <template #label> Subject <span class="text-red">*</span> </template>
    </v-autocomplete>

    <!-- <v-autocomplete
      v-model="localFeedback.category"
      :items="categories"
      item-title="title"
      item-value="value"
      item-props
      label="Category"
      variant="outlined"
      density="compact"
      class="mb-2"
      clearable
      :rules="[requiredRule]"
    >
      <template #label> Category <span class="text-red">*</span> </template>
    </v-autocomplete> -->

    <v-text-field
      label="Location"
      variant="outlined"
      density="compact"
      v-model="localFeedback.location"
      :rules="[requiredRule]"
    >
      <template #label> Location <span class="text-red">*</span> </template>
    </v-text-field>

    <v-textarea
      label="Description"
      variant="outlined"
      density="compact"
      auto-grow
      rows="4"
      v-model="localFeedback.description"
      :rules="[requiredRule]"
    >
      <template #label> Description <span class="text-red">*</span> </template>
    </v-textarea>

    <template #footer>
      <v-btn
        color="primary-button"
        class="text-capitalize mb-4"
        block
        height="40"
        :loading="loading"
        :disabled="loading || !isFormValid"
        @click="submitFeedback"
      >
        Submit
      </v-btn>
    </template>
  </FormDialog>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: boolean;
  feedback: TFeedbackCreate;
  isEditMode: boolean;
  loading: boolean;
  // categories: { title: string; value: string }[];
  erroredImages?: string[];
  maxFiles?: number;
}>();

const emit = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
  (e: "update:feedback", value: TFeedbackCreate): void;
  (e: "close"): void;
  (e: "submit", payload: TFeedbackCreate): void;
  (e: "fileAdded", file: File): void;
  (e: "fileDeleted", url: string): void;
}>();

const dialog = computed({
  get: () => props.modelValue,
  set: (val) => emit("update:modelValue", val),
});

const localFeedback = computed({
  get: () => props.feedback,
  set: (val) => emit("update:feedback", val),
});

const localErroredImages = ref<string[]>(props.erroredImages || []);

watch(
  () => props.erroredImages,
  (val) => {
    if (val) localErroredImages.value = val;
  }
);

const displayedAttachments = computed(() => {
  return localFeedback.value.attachments || [];
});

const { requiredRule } = useUtils();

const isFormValid = computed(() => {
  return (
    localFeedback.value.subject &&
    // localFeedback.value.category &&
    localFeedback.value.location &&
    localFeedback.value.description
  );
});

function handleFileAdded(file: File) {
  emit("fileAdded", file);
}

function deleteFile(url: string) {
  emit("fileDeleted", url);
}

function onImageError(file: string) {
  if (!localErroredImages.value.includes(file)) {
    localErroredImages.value.push(file);
  }
}

function closeDialog() {
  dialog.value = false;
  emit("close");
}

function submitFeedback() {
  emit("submit", { ...localFeedback.value });
}

const { subjects } = useLocal();

const customFilter = (value: string, query: string, item: any) => {
  const title = item?.raw?.title?.toLowerCase() || "";
  const subtitle = item?.raw?.subtitle?.toLowerCase() || "";
  const search = query.toLowerCase();
  return title.includes(search) || subtitle.includes(search);
};
</script>
