<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import type { CollectionObject } from '@MailManager/models/collection'
import type { ServiceObject } from '@MailManager/models'

interface Props {
  modelValue: boolean
  service: ServiceObject
  folder: CollectionObject
  parentFolderLabel?: string
  validateName?: (name: string) => string[]
  loading?: boolean
  errorMessage?: string
}

const props = withDefaults(defineProps<Props>(), {
  parentFolderLabel: 'Root',
  validateName: () => [],
  loading: false,
  errorMessage: '',
})

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  confirm: [folderName: string]
}>()

const folderName = ref('')
const validationErrors = ref<string[]>([])

const dialogValue = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

const isValid = computed(() => {
  return folderName.value.trim().length > 0 && validationErrors.value.length === 0
})

watch(folderName, (newName) => {
  validationErrors.value = props.validateName(newName)
})

function resetForm() {
  folderName.value = props.folder.properties.label || ''
  validationErrors.value = []
}

watch(dialogValue, (isOpen) => {
  if (isOpen) {
    resetForm()
  }
}, { immediate: true })

const handleRename = async () => {
  const errors = props.validateName(folderName.value)

  if (errors.length > 0) {
    validationErrors.value = errors
    return
  }

  const newName = folderName.value.trim()
  if (newName === props.folder.properties.label) {
    dialogValue.value = false
    return
  }

  emit('confirm', newName)
}

const handleCancel = () => {
  dialogValue.value = false
  resetForm()
}

</script>

<template>
  <v-dialog
    v-model="dialogValue"
    max-width="500"
    persistent
  >
    <v-card>
      <v-card-title class="text-h5">
        Rename Folder
      </v-card-title>

      <v-card-text>
        <div class="mb-4">
          <div class="text-caption text-medium-emphasis">Account</div>
          <div class="text-body-2">
            {{ service.label || service.primaryAddress || 'Mail Account' }}
          </div>
        </div>

        <div class="mb-4">
          <div class="text-caption text-medium-emphasis">Location</div>
          <div class="text-body-2">
            {{ parentFolderLabel }}
          </div>
        </div>

        <v-text-field
          v-model="folderName"
          label="Folder Name"
          placeholder="Enter folder name"
          variant="outlined"
          autofocus
          :error-messages="validationErrors"
          :disabled="loading"
          @keyup.enter="isValid && handleRename()"
        />

        <v-alert
          v-if="errorMessage"
          type="error"
          variant="tonal"
          density="compact"
          class="mt-2"
        >
          {{ errorMessage }}
        </v-alert>
      </v-card-text>

      <v-card-actions>
        <v-spacer />

        <v-btn
          variant="text"
          :disabled="loading"
          @click="handleCancel"
        >
          Cancel
        </v-btn>

        <v-btn
          color="primary"
          variant="elevated"
          :loading="loading"
          :disabled="!isValid"
          @click="handleRename"
        >
          Save
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<style scoped>
.text-caption {
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.0333em;
}
</style>
