import { defineComponent, onMounted, ref, watch } from 'vue'
import { IonIcon, IonPage, IonContent } from '@ionic/vue'
import { useRoute, useRouter } from 'vue-router'
import {
  timerOutline,
  chevronUp,
  chevronDown,
  playCircleOutline,
  pencilOutline,
  trashOutline,
  addCircleOutline,
} from 'ionicons/icons'

import { deleteTimer, getTimers } from '@/db/crud/timerCrud'
import type { TimersRow } from '@/types/timerType'

export default defineComponent({
  name: 'TimersList',
  components: { IonIcon, IonPage, IonContent },

  setup() {
    /** Список всех таймеров */
    const timers = ref<TimersRow[]>([])

    /** Флаг загрузки списка таймеров */
    const loading = ref<boolean>(true)

    /** Ошибка загрузки или операций */
    const error = ref<string | null>(null)

    /** ID раскрытого таймера в списке */
    const expandedId = ref<number | null>(null)

    /** ID таймера, ожидающего удаления */
    const confirmDeleteId = ref<number | null>(null)

    const router = useRouter()
    const route = useRoute()

    /** Переход на страницу конкретного таймера */
    const goToTimer = (id: number) => {
      router.push(`/timer/${id}`)
    }

    /** Переход на создание нового таймера */
    const goToCreateTimer = () => {
      router.push('/timer-update/new')
    }

    /** Переход на редактирование таймера */
    const goToEditTimer = (id: number) => {
      router.push(`/timer-update/${id}`)
    }

    /** Открывает подтверждение удаления таймера */
    const askDeleteTimer = (id: number): void => {
      confirmDeleteId.value = id
    }

    /** Отмена удаления таймера */
    const cancelDeleteTimer = (): void => {
      confirmDeleteId.value = null
    }

    /** Удаляет таймер и обновляет список */
    const removeTimer = async (): Promise<void> => {
      if (confirmDeleteId.value === null) {
        return
      }

      try {
        await deleteTimer(confirmDeleteId.value)
        confirmDeleteId.value = null
        await loadTimers()
      } catch (e: unknown) {
        error.value = e instanceof Error ? e.message : 'Ошибка удаления таймера'
      }
    }

    /** Загружает список таймеров из базы данных */
    const loadTimers = async (): Promise<void> => {
      loading.value = true
      error.value = null

      try {
        const result = await getTimers()
        timers.value = result
      } catch (e: unknown) {
        error.value = e instanceof Error ? e.message : 'Ошибка загрузки таймеров'
      } finally {
        loading.value = false
      }
    }

    /** Переключает раскрытие карточки таймера */
    const toggleExpand = (id: number): void => {
      expandedId.value = expandedId.value === id ? null : id
    }

    /** Загружает таймеры при первом рендере */
    onMounted(loadTimers)

    /** Перезагружает список при возврате на страницу /timers */
    watch(
      () => route.fullPath,
      (path) => {
        if (path === '/timers') {
          loadTimers()
        }
      },
      { immediate: false }
    )

    return {
      timers,
      loading,
      error,
      expandedId,
      confirmDeleteId,

      toggleExpand,

      timerOutline,
      chevronUp,
      chevronDown,
      playCircleOutline,
      pencilOutline,
      trashOutline,
      addCircleOutline,
      goToTimer,
      goToCreateTimer,
      goToEditTimer,
      askDeleteTimer,
      cancelDeleteTimer,
      removeTimer,
    }
  },
})