<template>
  <v-menu>
    <template #activator="{ props: menuProps }">
      <v-btn
        icon
        variant="text"
        density="comfortable"
        size="default"
        v-bind="menuProps"
      >
        <v-icon icon="mdi-dots-vertical" />
      </v-btn>
    </template>
    <v-list density="compact">
      <v-list-item
        prepend-icon="mdi-pencil-outline"
        title="Edit"
        @click="openEdit"
      />
      <v-list-item
        prepend-icon="mdi-delete-outline"
        title="Delete"
        class="text-error"
        @click="showDelete = true"
      />
    </v-list>
  </v-menu>

  <v-dialog
    v-model="showEdit"
    width="500"
  >
    <v-form
      ref="editFormRef"
      @submit.prevent="updateFlashcard"
    >
      <v-card>
        <v-card-title>Edit Flashcard</v-card-title>
        <v-card-text class="d-flex flex-column ga-2">
          <v-textarea
            v-model="editFront"
            label="Front"
            rows="3"
            auto-grow
            :rules="[required]"
          />
          <v-textarea
            v-model="editBack"
            label="Back"
            rows="3"
            auto-grow
            :rules="[required]"
          />
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn
            variant="text"
            text="Cancel"
            @click="showEdit = false"
          />
          <v-btn
            type="submit"
            color="primary"
            variant="flat"
            :loading="isSubmitting"
            text="Save"
          />
        </v-card-actions>
      </v-card>
    </v-form>
  </v-dialog>

  <v-dialog
    v-model="showDelete"
    width="400"
  >
    <v-card>
      <v-card-title>Delete Flashcard</v-card-title>
      <v-card-text>Are you sure you want to delete this flashcard?</v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn
          variant="text"
          text="Cancel"
          @click="showDelete = false"
        />
        <v-btn
          color="error"
          variant="flat"
          :loading="isSubmitting"
          text="Delete"
          @click="deleteFlashcard"
        />
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { VForm } from "vuetify/components"

import { required } from "@/utils/validators"
import flashcardsApi, { type Flashcard } from "@/api/flashcards-api"
import useSnack from "@/use/use-snack"

const props = defineProps<{ flashcard: Flashcard }>()

const emit = defineEmits<{
  updated: [flashcard: Flashcard]
  deleted: [flashcardId: number]
}>()

const snack = useSnack()
const isSubmitting = ref(false)

// Edit
const showEdit = ref(false)
const editFront = ref("")
const editBack = ref("")
const editFormRef = ref<InstanceType<typeof VForm> | null>(null)

function openEdit() {
  editFront.value = props.flashcard.front
  editBack.value = props.flashcard.back
  showEdit.value = true
}

async function updateFlashcard() {
  if (!editFormRef.value) return
  const { valid } = await editFormRef.value.validate()
  if (!valid) return

  try {
    isSubmitting.value = true
    const { flashcard } = await flashcardsApi.update(props.flashcard.id, {
      front: editFront.value,
      back: editBack.value,
    })
    emit("updated", flashcard)
    showEdit.value = false
    snack.success("Flashcard updated")
  } catch {
    snack.error("Failed to update flashcard")
  } finally {
    isSubmitting.value = false
  }
}

// Delete
const showDelete = ref(false)

async function deleteFlashcard() {
  try {
    isSubmitting.value = true
    await flashcardsApi.delete(props.flashcard.id)
    emit("deleted", props.flashcard.id)
    showDelete.value = false
    snack.success("Flashcard deleted")
  } catch {
    snack.error("Failed to delete flashcard")
  } finally {
    isSubmitting.value = false
  }
}
</script>
