<template>
  <BasicModal
    width="85%"
    max-width="48rem"
    min-width="auto"
    :closable="false"
    :show-close-button="false"
  >
    <template #default>
      <div class="register-success">
        <img :src="flower" alt="" class="register-success__image" />
        <div class="register-success__content">
          <h3 class="register-success__title">از پاسخ‌دهی شما ممنونیم.</h3>
          <p class="register-success__desc">
            اطلاعات و مدارک شما برای ما با موفقیت ارسال شده است. پس از بررسی و تأیید هویت و مدارک
            توسط مجموعه، حساب کاربری شما فعال می‌شود
          </p>
          <div class="register-success__actions">
            <BaseButton
              text="خروج"
              :loading="logoutMutation.isPending.value"
              custom-class="register-success__btn"
              @click="onLogout"
            >
              <template #appendIcon>
                <SvgIcon name="arrow-left" :size="18" color="#fff" />
              </template>
            </BaseButton>
          </div>
        </div>
      </div>
    </template>
  </BasicModal>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { gallery } from '@/utils/gallery'
import useAuth from '@/composables/useAuth'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { useLogoutMutation } from '@/services/query/auth'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'

defineOptions({ name: 'StudentRegisterSuccessModal' })

const router = useRouter()
const { clearSession } = useAuth()
const store = useStudentRegistrationStore()
const logoutMutation = useLogoutMutation()

const flower = gallery.registrationCompleteFlower

const onLogout = async () => {
  try {
    await logoutMutation.mutateAsync()
  } catch {
    /* ignore */
  } finally {
    clearSession()
    store.reset()
    router.push({ name: 'login' })
  }
}
</script>

<style lang="scss" scoped>
.register-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;

  @media (min-width: 1024px) {
    flex-direction: row;
    align-items: center;
    padding: 1rem 2rem;
    gap: 1.5rem;
  }

  &__image {
    height: 4.8rem;
    width: auto;
    object-fit: contain;
  }

  &__content {
    text-align: center;

    @media (min-width: 1024px) {
      text-align: right;
      flex: 1;
    }
  }

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 700;
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
  }

  &__desc {
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    line-height: 1.7;
    color: #7c7c7c;
    margin: 0 0 1rem;
    text-align: justify;
  }

  &__actions {
    display: flex;
    justify-content: center;

    @media (min-width: 1024px) {
      justify-content: flex-start;
    }
  }

  &__btn {
    min-width: 10rem;
    padding: 0 1.5rem;
  }
}
</style>
