<template>
  <form class="skill-five" @submit.prevent="onSubmit">
    <LineTitleBlock title="مهارت‌ها و تخصص‌ها" title-en="Skills & Expertise" />
    <div class="skill-five__row">
      <TextareaField
        v-model="form.responseToUnqualifiedAdvisors"
        name="responseToUnqualifiedAdvisors"
        label="در بستر و محیط جلسه شما افرادی هستند که بواسطه ارائه اذکار و اوراد به مردم برای حل مسائل و مشکلات زندگی‌شان، محل رجوع شده و توانسته‌اند فضایی ایجاد نمایند که مردم به جای مراجعه به متخصصین در هر موضوع یا تلاش برای حل مشکلات، رجوع به این افراد را ترجیح دهند. این در حالی است که می‌دانید برخی دستورات و تجویز‌های این افراد نادرست بوده و با مقاصد مادی یا غیر موجه به این امور می‌پردازند. متناسب با این موضوع، برنامه و عملکرد شما چیست؟ اگر خواسته باشید توصیه‌های مشابه از اساتید و علمای مطرح یا اذکار توصیه شده را به مردم بگویید چگونه مرز این دو را مشخص می‌کنید؟"
        :row="isMobile ? 5 : 1"
        :error="errors.responseToUnqualifiedAdvisors"
        @blur="validateAt('responseToUnqualifiedAdvisors', form.responseToUnqualifiedAdvisors)"
      >
        <template #appendIcon>
          <SvgIcon name="file" :size="20" color="var(--color-thd-gray)" />
        </template>
      </TextareaField>

      <TextareaField
        v-model="form.relevantCertificates"
        name="relevantCertificates"
        label="چه مدارک تحصیلی یا مهارتی و گواهینامه‌هایی را اگر داشته باشید می‌توانید با مخاطب تعامل داشته و بر او اثر بگذارید؟"
        :row="isMobile ? 5 : 1"
        :error="errors.relevantCertificates"
        @blur="validateAt('relevantCertificates', form.relevantCertificates)"
      >
        <template #appendIcon>
          <SvgIcon name="file" :size="20" color="var(--color-thd-gray)" />
        </template>
      </TextareaField>

      <TextareaField
        v-model="form.hijabApproach"
        name="hijabApproach"
        label="در مواجهه با «مسئله حجاب در جامعه» یا در مواجهه با «فرد بی‌حجاب در جلسه شما» چه می‌کنید؟ (ایده، منطق و روش خود را بیان فرمایید)"
        :row="isMobile ? 5 : 1"
        :error="errors.hijabApproach"
        @blur="validateAt('hijabApproach', form.hijabApproach)"
      >
        <template #appendIcon>
          <SvgIcon name="file" :size="20" color="var(--color-thd-gray)" />
        </template>
      </TextareaField>
    </div>

    <div class="skill-five__divider" />
    <StepActions :loading="saveRegisterMutation.isPending.value" @back="store.goToPrevStep()" />
  </form>
</template>

<script setup>
import useYup from '@/composables/useYup'
import { STUDENT_REGISTRATION } from '@/enums'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import TextareaField from '@/components/form/TextareaField.vue'
import { useSaveRegisterDataMutation } from '@/services/query/auth'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { skillAssessmentPart5Schema } from '@/features/auth/schema/student-register'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'

const store = useStudentRegistrationStore()

const isMobile = ref(window.innerWidth < 768)
const onResize = () => {
  isMobile.value = window.innerWidth < 768
}
onMounted(() => window.addEventListener('resize', onResize))
onBeforeUnmount(() => window.removeEventListener('resize', onResize))

const form = ref({ ...store.skill5 })

watch(form, (value) => store.updateSection('skill5', value), { deep: true })

const { validate, validateAt, errors } = useYup(skillAssessmentPart5Schema)
const saveRegisterMutation = useSaveRegisterDataMutation()

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  await saveRegisterMutation.mutateAsync(payload)
  store.skill5 = { ...store.skill5, ...payload }
  store.markStepAsCompleted(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_5)
  store.goToNextStep()
}
</script>

<style lang="scss" scoped>
.skill-five {
  &__row {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
  }

  &__divider {
    border-block-end: 1px solid var(--color-thd-gray);
    margin: 1rem 0 1.5rem;
  }
}
</style>
