<template>
  <form class="skill-step" @submit.prevent="onSubmit">
    <LineTitleBlock title="مهارت‌ها و تخصص‌ها" title-en="Skills & Expertise" />
    <div class="skill-step__row">
      <div class="skill-step__intro">
        <p>{{ intro }}</p>
      </div>
      <div class="skill-step__select">
        <SelectField
          v-model="form[selectField]"
          :name="selectField"
          :options="options"
          option-label="label"
          option-value="value"
          :error="errors[selectField]"
          @change="onSelect"
        />
      </div>
      <div :class="['skill-step__description', { 'skill-step__description--blurred': !hasOther }]">
        <TextareaField
          v-model="form[descField]"
          :name="descField"
          label="کاری که انجام می‌دهید را بنویسید."
          :row="isMobile ? 5 : 1"
          :disabled="!hasOther"
          :error="errors[descField]"
        >
          <template #appendIcon>
            <SvgIcon name="file" :size="20" color="var(--color-thd-gray)" />
          </template>
        </TextareaField>
      </div>
    </div>

    <div class="skill-step__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 SelectField from '@/components/form/SelectField.vue'
import LineTitleBlock from '@/components/LineTitleBlock.vue'
import TextareaField from '@/components/form/TextareaField.vue'
import { useSaveRegisterDataMutation } from '@/services/query/auth'
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import StepActions from '@/features/auth/components/studentRegister/StepActions.vue'
import { useStudentRegistrationStore } from '@/features/auth/store/student-registration'

const props = defineProps({
  step: { type: Number, required: true },
  storeKey: { type: String, required: true },
  selectField: { type: String, required: true },
  descField: { type: String, required: true },
  intro: { type: String, required: true },
  options: { type: Array, required: true },
  schema: { type: Object, required: true },
})

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 seed = store[props.storeKey] || {}
const form = ref({
  [props.selectField]: seed[props.selectField] || '',
  [props.descField]: seed[props.descField] || '',
})

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

const hasOther = computed(() => form.value[props.selectField] === 'other')

const onSelect = () => {
  if (!hasOther.value) form.value[props.descField] = ''
}

const { validate, errors } = useYup(props.schema)

const saveRegisterMutation = useSaveRegisterDataMutation()

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  await saveRegisterMutation.mutateAsync(payload)
  store[props.storeKey] = { ...store[props.storeKey], ...payload }
  store.markStepAsCompleted(props.step)
  store.goToNextStep()
}
</script>

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

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

  &__intro {
    @media (min-width: 1024px) {
      grid-column: span 6;
    }

    p {
      font-family: var(--font-family-fa);
      font-weight: 400;
      font-size: 0.9375rem;
      line-height: 1.7;
      color: #a7a7a7;
      text-align: justify;
      margin: 0;
    }
  }

  &__select {
    @media (min-width: 1024px) {
      grid-column: span 6;
    }
  }

  &__description {
    grid-column: 1 / -1;
    transition: filter 0.2s ease;

    &--blurred {
      filter: blur(2px);
    }
  }

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