import './styles/pages/_contact.scss';

document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector<HTMLFormElement>('#contact-form');
    const submitBtn = document.querySelector<HTMLButtonElement>('#submit-btn');
    const submitLabel = submitBtn?.querySelector<HTMLElement>('[data-submit-label="true"]');

    if (!form || !submitBtn) {
        return; // Not on the Contact page.
    }

    const sendingLabel = form.dataset.sendingLabel ?? 'Sending...';

    const subjectSelect = form.querySelector<HTMLSelectElement>('#subject');
    const cvFieldGroup = form.querySelector<HTMLElement>('#cv-field-group');
    const cvInput = form.querySelector<HTMLInputElement>('#cv');

    const toggleCvField = (): void => {
        if (!subjectSelect || !cvFieldGroup) {
            return;
        }

        const isApplication = subjectSelect.value === 'application';
        cvFieldGroup.hidden = !isApplication;

        if (!isApplication && cvInput) {
            cvInput.value = '';
        }
    };

    subjectSelect?.addEventListener('change', toggleCvField);
    toggleCvField();

    form.addEventListener('submit', () => {
        submitBtn.disabled = true;

        if (submitLabel) {
            submitLabel.textContent = sendingLabel;
        }
    });
});