<template>
  <div class="rcf">
    <form class="rcf__form" @submit.prevent="onSubmit">
      <div class="rcf__row">
        <div class="rcf__cell">
          <TextField
            v-model="form.subject"
            name="subject"
            label="عنوان مشاوره درخواستی"
            placeholder="عنوان مشاوره را وارد کنید"
            :error="errors.subject"
          />
        </div>
      </div>

      <div class="rcf__row">
        <div class="rcf__cell rcf__cell--full">
          <TextareaField
            v-model="form.message"
            name="message"
            label="توضیحات خود را وارد نمایید"
            :row="5"
            :error="errors.message"
          />
        </div>
      </div>

      <div class="rcf__divider" />

      <div class="rcf__actions">
        <BaseButton
          type="submit"
          text="درخواست مشاوره"
          custom-class="rcf__submit"
          :loading="submitting"
        >
          <template #appendIcon>
            <SvgIcon name="arrow-left" :size="16" color="#fff" />
          </template>
        </BaseButton>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as yup from 'yup'
import useYup from '@/composables/useYup'
import BaseButton from '@/components/BaseButton.vue'
import SvgIcon from '@/components/icons/SvgIcon.vue'
import TextField from '@/components/form/TextField.vue'
import TextareaField from '@/components/form/TextareaField.vue'

defineProps({
  submitting: { type: Boolean, default: false },
})

const emit = defineEmits(['submit'])

const form = ref({
  subject: '',
  message: '',
})

const schema = yup.object({
  subject: yup.string().trim().required('عنوان مشاوره را وارد کنید'),
  message: yup
    .string()
    .trim()
    .min(5, 'توضیحات حداقل ۵ کاراکتر باشد')
    .required('توضیحات را وارد کنید'),
})

const { validate, errors } = useYup(schema)

const onSubmit = async () => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  emit('submit', { subject: payload.subject, message: payload.message })
}
</script>

<style lang="scss" scoped>
.rcf {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 0.75rem;

  &__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

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

  &__cell {
    display: flex;
    flex-direction: column;

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

  &__divider {
    height: 0.75px;
    background: #ddd;
    margin-top: 0.25rem;
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
  }

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