<script setup lang="ts">
import type { NuxtError } from '#app'
import ErrorTemplate from '#adata-ui/components/elements/error-template/index.vue'
import type { ErrorTemplateData } from '#adata-ui/components/elements/error-template/types'

const props = defineProps({
  error: Object as () => NuxtError,
})
const { t } = useI18n()
const localePath = useLocalePath()

const errorData = computed<ErrorTemplateData>(() => {
  const statusCode = props.error?.statusCode
  switch (statusCode) {
    case 504: {
      return {
        icon: '/error-illustrations/504.webp',
        statusCode,
        title: t('errorPage.504.title'),
        content: {
          subTitle: t('errorPage.504.subTitle'),
        },
      }
    }
    case 401:
      return {
        icon: '/error-illustrations/401.webp',
        statusCode,
        title: t('errorPage.401.title'),
        content: {
          subTitle: t('errorPage.401.subTitle'),
        },
      }
    case 404:
      return {
        icon: '/error-illustrations/404.webp',
        statusCode,
        title: t('errorPage.404.title'),
        content: {
          subTitle: t('errorPage.404.subTitle'),
          subTitleSecond: t('errorPage.404.subTitleSecond'),
        },
      }
    case 403:
      return {
        icon: '/error-illustrations/403.webp',
        statusCode,
        title: t('errorPage.403.title'),
        content: {
          subTitle: t('errorPage.403.subTitle'),
          subTitleSecond: t('errorPage.403.subTitleSecond'),
        },
      }
    case 503:
      return {
        icon: '/error-illustrations/503.webp',
        statusCode,
        title: t('errorPage.503.title'),
        content: {
          subTitle: t('errorPage.503.subTitle'),
        },
      }
    case 502:
      return {
        icon: '/error-illustrations/502.webp',
        statusCode,
        title: t('errorPage.502.title'),
        content: {
          title: 'Варианты решения проблемы:',
          list: [
            {
              id: 1,
              label: 'Обновите страницу',
              link: false,
            },
            {
              id: 1,
              label: 'Очистите кэш браузера',
              link: false,
            },
            {
              id: 1,
              label: 'Свяжитесь с технической поддержкой',
              link: true,
            },
          ],
        },
      }
    case 500:
      return {
        icon: '/error-illustrations/500.webp',
        statusCode,
        title: t('errorPage.500.title'),
        content: {
          subTitle: t('errorPage.500.subTitle'),
        },

      }
  }
})
function handleError() {
  navigateTo(`${localePath('/')}`, { external: true })
}
</script>

<template>
  <div class="container mx-auto lg:fixed lg:left-[50%] lg:top-[50%] lg:-translate-x-[50%] lg:-translate-y-[50%]">
    <error-template :error="errorData">
      <template #content>
        <div class="body-500 mt-4 flex flex-col gap-4">
          <div
            v-if="errorData?.content"
            class="flex flex-col gap-4 lg:gap-2"
          >
            <p
              v-if="errorData.content?.title"
              class="text-base font-bold"
            >
              {{ errorData.content.title }}
            </p>
            <p
              v-if="errorData.content?.subTitle"
              class="text-sm	font-medium lg:max-w-[560px]"
            >
              {{ errorData.content.subTitle }}
            </p>
            <p
              v-if="errorData.content?.subTitleSecond"
              class="text-sm	font-medium"
            >
              {{
                errorData.content.subTitleSecond
              }}
            </p>
            <div
              v-for="item in errorData.content?.list"
              :key="item.id"
              class="flex items-center gap-1 text-sm	font-medium"
            >
              <a-icon-check class="stroke-blue-600" />
              {{ item.label }}
              <span
                v-if="item.link"
                class="text-blue-700"
              >info@adata.kz</span>
            </div>
          </div>
        </div>
      </template>
      <template #default>
        <div class="mt-0 w-full p-4 lg:mt-8 lg:w-fit lg:p-0">
          <a-button
            v-if="errorData.statusCode !== 502"
            class="w-full lg:w-fit"
            @click="handleError"
          >
            {{t('modals.buttons.goToMainPage')}}
          </a-button>
        </div>
      </template>
    </error-template>
    <span class="hidden">
      {{ error }}
    </span>
  </div>
</template>

<style scoped>

</style>
