<template>
  <BasicModal
    :title="isEditMode ? 'ویرایش گواهی و تقدیرنامه' : 'افزودن گواهی و تقدیرنامه جدید'"
    title-en="Certificate"
    width="95%"
    max-width="48rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default="{ close }">
      <form class="add-certificate" @submit.prevent="onSubmit(close)">
        <TextField
          v-model="form.title"
          name="title"
          label="عنوان"
          :error="errors.title"
          @blur="validateAt('title', form.title)"
        />

        <TextField
          v-model="form.universityName"
          name="universityName"
          label="نام دانشگاه"
          :error="errors.universityName"
          @blur="validateAt('universityName', form.universityName)"
        />

        <div class="add-certificate__row">
          <TextField
            v-model="form.startYear"
            name="startYear"
            label="سال شروع"
            inputmode="numeric"
            :convert-digits="true"
          />
          <TextField
            v-model="form.endYear"
            name="endYear"
            label="سال پایان"
            inputmode="numeric"
            :convert-digits="true"
          />
        </div>

        <div class="add-certificate__divider" />

        <footer class="add-certificate__footer">
          <BaseButton type="submit" text="ذخیره اطلاعات" custom-class="add-certificate__submit">
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
          </BaseButton>
        </footer>
      </form>
    </template>
  </BasicModal>
</template>

<script setup>
import { ref } from 'vue'
import * as yup from 'yup'
import useYup from '@/composables/useYup'
import useModal from '@/composables/useModal'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import TextField from '@/components/form/TextField.vue'
import { useCompleteInfoStore } from '@/features/missionary/store/complete-info'

defineOptions({ name: 'MissionaryAddCertificateModal' })

const store = useCompleteInfoStore()
const { getModal } = useModal()

const modalData = getModal('MissionaryAddCertificateModal')?.data ?? {}
const editingIndex = modalData.index ?? null
const isEditMode = editingIndex != null

const emptyForm = () => ({
  title: '',
  universityName: '',
  startYear: '',
  endYear: '',
})

const form = ref({ ...emptyForm(), ...modalData.entry })

const schema = yup.object({
  title: yup.string().trim().required('عنوان را وارد کنید'),
  universityName: yup.string().trim().required('نام دانشگاه را وارد کنید'),
})

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

const onSubmit = async (close) => {
  const { isValid } = await validate(form.value)
  if (!isValid) return
  store.upsertCertificate({ ...form.value }, editingIndex)
  close?.()
}
</script>

<style lang="scss" scoped>
.add-certificate {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: start;
  padding-block: 0.25rem 0.5rem;

  &__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.875rem;
  }

  &__divider {
    border-block-end: 1px solid #ddd;
    margin-block: 0.5rem 0.75rem;
  }

  &__footer {
    display: flex;
    justify-content: flex-start;
  }

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