import $ from 'jquery';
import 'bootstrap';

$(function () {
    const contactSelect = $('#shared_file_contact')
    const contactSelectZone = $('#contactSelectZone')
    const newContactZone = $('#newContactZone')
    const newContactButton = $('#newContactButton')
    const newContactLabel = $('#newContactLabel')
    const newContactButtonWrap = $('#newContactButtonWrap')
    const contactEmail = $('#shared_file_contactEmail')
    const newContactCellphone = $('#shared_file_cellphone')
    const resetForm = $('#reset_form')
    const newContactCompany = $('#shared_file_company')
    const newContactFirstName = $('#shared_file_firstName')
    const newContactLastName = $('#shared_file_lastName')
    const noSmsAdvice = $('#no_sms_advice')
    const outputSms = $('#output_sms')

    contactEmail.prop('required', false)
    newContactZone.hide()

    contactSelect.prop('required', true)

    newContactCellphone.on('input', function () {
        const cellphone: string = newContactCellphone.val() as string
        const contactId: number = 0
        if (cellphone.length > 0) {
            getSms(contactId)
        } else {
            outputSms.hide()
        }
    })

    contactSelect.on('input', function () {
        $('#submitbutton').prop('disabled', false)
        newContactButtonWrap.hide()
        const contactId: number = contactSelect.val() as number
        getSms(contactId)
        console.log('this')
    })

    function getSms(contactId: number) {
        outputSms.show()
        if (window.location.href.indexOf("/de/") > -1) {
            outputSms.load('/app/de/upload/sms?contact=' + contactId)
        }

        if (window.location.href.indexOf("/en/") > -1) {
            outputSms.load('/app/en/upload/sms?contact=' + contactId)
        }

        if (window.location.href.indexOf("/es/") > -1) {
            outputSms.load('/app/es/upload/sms?contact=' + contactId)
        }
        noSmsAdvice.hide()
    }

    newContactButton.on('click', function () {
        $('#submitbutton').prop('disabled', false)
        contactSelect.prop('required', false)
        contactEmail.prop('required', true)
        newContactZone.show()
        newContactButtonWrap.hide()
        contactSelectZone.hide()
        newContactButton.hide()
    })
    newContactLabel.on('click', function () {
        $('#submitbutton').prop('disabled', false)
        contactSelect.prop('required', false)
        contactEmail.prop('required', true)
        newContactZone.show()
        newContactButtonWrap.hide()
        contactSelectZone.hide()
        newContactButton.hide()
    })
    // newContactButtonWrap.on('click', function () {
    //     $('#submitbutton').prop('disabled', false)
    //     contactSelect.prop('required', false)
    //     contactEmail.prop('required', true)
    //     newContactZone.show()
    //     newContactButtonWrap.hide()
    //     contactSelectZone.hide()
    //     newContactButton.hide()
    // })

    resetForm.on('click', function () {
        contactEmail.prop('required', false)
        newContactZone.hide()
        contactSelect.prop('required', true)
        $('#submitbutton').prop('disabled', true)
        contactSelectZone.show()
        newContactButtonWrap.show()
        newContactButton.show()
        contactEmail.val('')
        contactSelect.val('').trigger('change')
        newContactCellphone.val('')
        newContactCompany.val('')
        newContactFirstName.val('')
        newContactLastName.val('')
        noSmsAdvice.show()
        outputSms.hide()
    })

    $('#submitbutton').on('click', function () {
        if (contactSelect.val() || contactEmail.val()) {
            $('#submitbutton').prop('disabled', true)
            $('#spinner').show()
            $("#form-area").css({"opacity": "0.5"});
            $('form[name="shared_file"]').trigger('submit');
        } else {
            const errorMessage = '<div class="alert alert-warning alert-dismissible fade show" role="alert">Bitte Email eintragen oder Kontakt auswählen oder Neuen Kontakt erstellen<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>'
            $('#output_email_empty').html(errorMessage)
            $('#output_email_empty_bottom').html(errorMessage)
        }
    })

});