<template>
  <form class="educational-info" @submit.prevent="onSubmit">
    <LineTitleBlock title="جزئیات تحصیلی" title-en="Educational Details" />
    <div class="educational-info__row">
      <div class="educational-info__cell">
        <SelectField
          v-model="form.educationStatus"
          name="educationStatus"
          label="وضعیت تحصیلی"
          :options="educationStatusOptions"
          option-label="label"
          option-value="value"
          :error="errors.educationStatus"
        />
      </div>
      <div class="educational-info__cell">
        <SelectField
          v-model="form.seminaryLevel"
          name="seminaryLevel"
          label="آخرین مدرک تحصیلی حوزوی"
          :options="seminaryLevelOptions"
          option-label="label"
          option-value="value"
          :error="errors.seminaryLevel"
        />
      </div>
      <div class="educational-info__cell">
        <SelectField
          v-model="form.universityLevel"
          name="universityLevel"
          label="آخرین مدرک تحصیلی دانشگاهی"
          :options="universityLevelOptions"
          option-label="label"
          option-value="value"
          :error="errors.universityLevel"
        />
      </div>
      <div class="educational-info__cell">
        <TextField
          v-model="form.universityName"
          name="universityName"
          label="نام حوزه علمیه / دانشگاه"
          :error="errors.universityName"
          @blur="validateAt('universityName', form.universityName)"
        >
          <template #appendIcon>
            <SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
          </template>
        </TextField>
      </div>
      <div class="educational-info__cell educational-info__cell--full">
        <TextField
          v-model="form.fieldOfStudy"
          name="fieldOfStudy"
          label="گرایش تخصصی حوزوی / رشته تحصیلی دانشگاهی"
          :error="errors.fieldOfStudy"
          @blur="validateAt('fieldOfStudy', form.fieldOfStudy)"
        >
          <template #appendIcon>
            <SvgIcon name="book" :size="20" color="var(--color-thd-gray)" />
          </template>
        </TextField>
      </div>
    </div>

    <LineTitleBlock title="مشخصات شغلی" title-en="Job Details" />
    <div class="educational-info__row">
      <div class="educational-info__cell educational-info__cell--full">
        <TextareaField
          v-model="form.activitySummary"
          name="activitySummary"
          label="خلاصه ای از فعالیت های خود را در موقعیت‌های شغلی ذکر شده بنویسید."
          :row="isMobile ? 5 : 1"
          :error="errors.activitySummary"
          @blur="validateAt('activitySummary', form.activitySummary)"
        >
          <template #appendIcon>
            <SvgIcon name="file" :size="20" color="var(--color-thd-gray)" />
          </template>
        </TextareaField>
      </div>
    </div>

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

<script setup>
import useYup from '@/composables/useYup'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import TextField from '@/components/form/TextField.vue'
import SelectField from '@/components/form/SelectField.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 { educationalInformationSchema } from '@/features/auth/schema/student-register'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'
import { EDUCATION_STATUS, SEMINARY_LEVEL, STUDENT_REGISTRATION, UNIVERSITY_LEVEL } from '@/enums'

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 educationStatusOptions = Object.entries(EDUCATION_STATUS).map(([value, label]) => ({
  value,
  label,
}))
const seminaryLevelOptions = Object.entries(SEMINARY_LEVEL).map(([value, label]) => ({
  value,
  label,
}))
const universityLevelOptions = Object.entries(UNIVERSITY_LEVEL).map(([value, label]) => ({
  value,
  label,
}))

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

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

const { validate, validateAt, errors } = useYup(educationalInformationSchema)

const saveRegisterMutation = useSaveRegisterDataMutation()

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

<style lang="scss" scoped>
.educational-info {
  &__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem 0.625rem;
    margin-bottom: 1rem;

    @media (min-width: 1024px) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  &__cell--full {
    grid-column: 1 / -1;
  }

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