<template>
  <BasicModal
    title="نمونهٔ مودال"
    title-en="Sample Modal"
    width="75%"
    min-width="0"
    max-width="98%"
    class="sample-modal"
  >
    <template #default="{ data, close }">
      <form class="sample-modal__form" @submit.prevent="onSubmit(close)">
        <p class="sample-modal__intro">
          این مودال الگوی استاندارد مدرسه بانو است: عنوان با
          <code>LineTitleBlock</code>
          در راست، دکمهٔ بستن داخلی در چپ.
        </p>

        <TextField
          v-model="form.subject"
          name="subject"
          label="موضوع"
          placeholder="موضوع را وارد کنید"
          :error="errors.subject"
          @blur="validateAt('subject', form.subject)"
        />
        <TextareaField
          v-model="form.note"
          name="note"
          label="توضیحات"
          placeholder="چند جمله توضیح..."
          :row="4"
          :error="errors.note"
          @blur="validateAt('note', form.note)"
        />

        <div v-if="data?.context" class="sample-modal__context">
          باز شده برای:
          <strong>{{ data.context }}</strong>
        </div>

        <div class="sample-modal__divider" />

        <div class="sample-modal__actions">
          <BaseButton
            variant="transparent"
            text="منصرف شدم"
            text-class="sample-modal__cancel-text"
            custom-class="sample-modal__btn-cancel"
            @click="close"
          />
          <BaseButton
            variant="primary"
            text="ارسال"
            type="submit"
            custom-class="sample-modal__btn-submit"
          />
        </div>
      </form>
    </template>
  </BasicModal>
</template>

<script setup>
import { ref } from 'vue'
import useYup from '@/composables/useYup'
import BasicModal from '@/components/BasicModal.vue'
import BaseButton from '@/components/BaseButton.vue'
import TextField from '@/components/form/TextField.vue'
import TextareaField from '@/components/form/TextareaField.vue'
import { sampleSchema } from '@/features/global-components/schema'

defineOptions({ name: 'SampleModal' })

const schema = sampleSchema

const form = ref({ subject: '', note: '' })
const { validate, validateAt, errors, resetErrors } = useYup(schema)

const onSubmit = async (close) => {
  const { isValid, payload } = await validate(form.value)
  if (!isValid) return
  close()
  form.value = { subject: '', note: '' }
  resetErrors()
  // eslint-disable-next-line no-console
  console.info('SampleModal submit', payload)
}
</script>

<style lang="scss" scoped>
.sample-modal {
  &__form {
    padding: 0.5rem 0;
    text-align: right;
  }

  &__intro {
    font-family: var(--font-family-fa);
    font-size: 0.8125rem;
    color: var(--color-sec-gray);
    line-height: 1.7;
    margin: 0 0 0.75rem;

    code {
      font-family: var(--font-family-en);
      direction: ltr;
      display: inline-block;
      background: #f3f4f6;
      padding: 0 0.35rem;
      border-radius: 0.25rem;
    }
  }

  &__context {
    margin-top: 0.5rem;
    font-family: var(--font-family-fa);
    font-size: 0.875rem;
    color: var(--color-sec-gray);
  }

  &__divider {
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--color-thd-gray);

    @media (min-width: 1024px) {
      margin-top: 1.5rem;
      margin-bottom: 1rem;
    }
  }

  &__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.25rem;

    @media (min-width: 768px) {
      gap: 0.625rem;
    }
  }

  &__btn-cancel {
    flex: 1 1 50%;
    padding: 0 1rem;

    @media (min-width: 640px) {
      flex: 0 0 auto;
      min-width: 9rem;
    }
  }

  &__cancel-text {
    color: #969696;
  }

  &__btn-submit {
    flex: 1 1 50%;

    @media (min-width: 640px) {
      flex: 0 0 auto;
      min-width: 9rem;
    }
  }
}
</style>

<style lang="scss">
@media (min-width: 1024px) {
  .basic-modal__container:has(> .basic-modal__card .sample-modal__form) {
    max-width: 85% !important;
  }
}

@media (min-width: 1280px) {
  .basic-modal__container:has(> .basic-modal__card .sample-modal__form) {
    max-width: 65% !important;
  }
}

@media (min-width: 1536px) {
  .basic-modal__container:has(> .basic-modal__card .sample-modal__form) {
    max-width: 50% !important;
  }
}
</style>
