<template>
  <BasicModal
    title="علت رد"
    title-en="Reason for Rejection"
    width="95%"
    max-width="50rem"
    min-width="auto"
    :show-close-button="true"
  >
    <template #default="{ data, close }">
      <form class="reject-reason-modal" @submit.prevent="onSubmit(data, close)">
        <TextareaField
          v-model="form.reason"
          name="reason"
          label="لطفا علت رد را توضیح دهید"
          :row="4"
          :error="errors.reason"
          @blur="validateAt('reason', form.reason)"
        />

        <div class="reject-reason-modal__divider" />

        <div class="reject-reason-modal__actions">
          <BaseButton
            variant="transparent"
            text="منصرف شدم"
            custom-class="reject-reason-modal__btn-cancel"
            @click="close"
          >
            <template #prependIcon>
              <SvgIcon name="caret-right" :size="14" color="var(--color-sec-gray)" />
            </template>
          </BaseButton>
          <BaseButton
            type="submit"
            text="ارسال"
            :loading="changeStatusMutation.isPending.value"
            custom-class="reject-reason-modal__btn-submit"
          >
            <template #appendIcon>
              <SvgIcon name="arrow-left" :size="18" color="#fff" />
            </template>
          </BaseButton>
        </div>
      </form>
    </template>
  </BasicModal>
</template>

<script setup>
import { ref } from 'vue'
import useYup from '@/composables/useYup'
import { useQueryClient } from '@tanstack/vue-query'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import { rejectionReasonSchema } from '../../../schema'
import TextareaField from '@/components/form/TextareaField.vue'
import { adminUsersKeys, useChangeAdminUserStatusMutation } from '@/services/query/admin-users'

defineOptions({ name: 'RejectReasonModal' })

const queryClient = useQueryClient()
const changeStatusMutation = useChangeAdminUserStatusMutation()

const DEFAULT_FORM = { reason: '' }

const { validate, validateAt, errors, resetErrors } = useYup(rejectionReasonSchema)

const form = ref(structuredClone({ ...DEFAULT_FORM }))

const onSubmit = async (data, close) => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  const id = data?.id
  if (!id) return
  await changeStatusMutation.mutateAsync({
    id,
    payload: { status: 'blocked', reason: payload.reason },
  })
  await queryClient.invalidateQueries({ queryKey: adminUsersKeys.all })
  form.value = structuredClone({ ...DEFAULT_FORM })
  resetErrors()
  close()
}
</script>

<style lang="scss" scoped>
.reject-reason-modal {
  width: 100%;
  text-align: start;
  padding: 0.5rem;

  &__divider {
    border-block-end: 1px solid var(--color-thd-gray);
    margin-block: 1rem;
  }

  &__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__btn-cancel {
    min-width: 9rem;
  }

  &__btn-submit {
    min-width: 9rem;
  }
}
</style>
