<script setup lang="ts">
const config = useRuntimeConfig()
const apiBase = config.public.apiBase

const isModalOpen = useState('modal_open', () => false)
const toggleModal = () => {
    modal_data.phone = undefined
    modal_data.name = undefined
    isModalOpen.value = !isModalOpen.value
}

const modal_data = reactive({
    phone: undefined,
    name: undefined
})
const modal_form = reactive({
    disabled: true,
    errors: [],
})

const validateInput = (evt: KeyboardEvent) => {
    const valid_symbols = /[a-zA-Z0-9\+(\\)\ @\.]/
    if (!valid_symbols.test(evt.key)) {
        evt.preventDefault()
        return
    }
}
const validate = () => {
    const phone_regexp = /^\+?[\d\s-()]{0,14}\d{11}$/
    const email_regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/

    if (modal_phone.value.length < 3) {
        modal_form.disabled = true
        return
    }
    if (phone_regexp.test(modal_phone.value) || email_regex.test(modal_phone.value)) {
        modal_form.disabled = false
        return
    }
}
const submit = (e: any) => {
    fetch(`${apiBase}/custom_request/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: modal_name.value || "ref from site",
            phone: modal_phone.value
        })
    })
    modal_phone.value = ''
    isModalOpen.value = false
}
</script>
<template>
    <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
        <div class="modal">
            <h2>Оставьте контакты для связи </h2>
            <form @submit.prevent="submit">
                <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
                <input type="phone" placeholder="Номер телефона или e-mail" v-model="modal_data.phone" @keypress="validateInput" @keyup="validate" />
                <div class="flex gap-4">
                    <button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>
                    <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>
                </div>
            </form>
        </div>
    </div>
</template>