var ticket_form = {
    settings: {
        accountUser_autocompleteUrl: '',
        patient_autocompleteUrl: '',
        patientChart_autocompleteUrl: '',
        account_user_ids: [],
        patient_ids: [],
    },
    init: function() {
        this.initAutocomplete();
        this.bindPatientAdd();
        this.bindPatientChartAdd();
        this.bindCcAdd();
        this.showNotesHistory();
    },
    initAutocomplete: function(){
        global.autocomplete.bind(ticket_form.settings.accountUser_autocompleteUrl,'#ticket_accountUser_fullName', '#ticket_accountUser');
    },
    bindPatientAdd: function() {
        let idx = jQ('#tbody-patient-list tr').length;

        const bindRemove = function() {
            jQ('.btn-patient-list-remove').unbind('click').bind('click', function() {
                const tr = jQ(this).parent().parent();
                tr.find('.ticket_pt_patientName').devbridgeAutocomplete('dispose');
                tr.remove();
                var pt_id = jQ(this).parent().parent().find('.ticket_pt_patient').val();
                var index = ticket_form.settings.patient_ids.indexOf(pt_id);
                if (index !== -1) ticket_form.settings.patient_ids.splice(index, 1);
            });
        };
        bindRemove();

        jQ('#tbody-patient-list').each(function(i){

            // We need to use enclosure in because onSelect listener takes only the last idx
            (function(idx){
                global.autocomplete.bind(ticket_form.settings.patient_autocompleteUrl, 'input[name="ticket[patientTickets][' + idx + '][patientTicket_patientName]"]', 'input[name="ticket[patientTickets][' + idx + '][patient]"]', {
                    onSelect: function (d) {
                        ticket_form.settings.patient_ids.push(d.id);
                    }
                });
            })(i);
        });

        jQ('#btn-ticket-add-patient').unbind('click').bind('click', function(){
            idx++;
            const trHtml =
                '<tr>' +
                '<td>' +
                '<input name="ticket[patientTickets][' + idx + '][patientTicket_patientName]" type="text" class="ticket_pt_patientName" placeholder="Patient" />' +
                '<input name="ticket[patientTickets][' + idx + '][patient]" type="hidden" class="ticket_pt_patient" />' +
                '</td>' +
                '<td>' +
                '<a href="javascript:void(0)" class="btn-patient-list-remove">X</a>' +
                '<input name="ticket[patientTickets][' + idx + '][id]" type="hidden" class="ticket_pt_id" />' +
                '</td>' +
                '</tr>';

            jQ(trHtml).appendTo(jQ('#tbody-patient-list'));

            // We need to use enclosure in because onSelect listener takes only the last idx
            (function(idx){

                global.autocomplete.bind(ticket_form.settings.patient_autocompleteUrl, 'input[name="ticket[patientTickets][' + idx + '][patientTicket_patientName]"]', 'input[name="ticket[patientTickets][' + idx + '][patient]"]', {
                    onSelect: function (d) {
                        ticket_form.settings.patient_ids.push(d.id);
                    }
                });
            })(idx);
            bindRemove();
        });
    },
    bindPatientChartAdd: function() {
        let idx = jQ('#tbody-patient-chart-list tr').length;

        const bindRemove = function() {
            jQ('.btn-patient-chart-list-remove').unbind('click').bind('click', function() {
                const tr = jQ(this).parent().parent();
                tr.find('.ticket_pct_chartNo').devbridgeAutocomplete('dispose');
                tr.remove();
            });
        };
        bindRemove();

        jQ('#tbody-patient-chart-list').each(function(i){

            // We need to use enclosure in because onSelect listener takes only the last idx
            (function(idx){
                global.autocomplete.bind(ticket_form.settings.patientChart_autocompleteUrl, 'input[name="ticket[patientChartTickets][' + idx + '][patientChartTicket_chartNo]"]', 'input[name="ticket[patientTickets][' + idx + '][patientChart]"]', {
                    onSelect: function (d) {
                        console.log(d);
                    }
                });
                jQ('input[name="ticket[patientChartTickets][' + idx + '][patientChartTicket_chartNo]"]').devbridgeAutocomplete('setOptions', {
                    params: {
                        patient_ids: ticket_form.settings.patient_ids.join('|'),
                    }
                });
            })(i);
        });

        jQ('#btn-ticket-add-patient-chart').unbind('click').bind('click', function(){
            idx++;
            const trHtml =
                '<tr>' +
                '<td>' +
                '<input name="ticket[patientChartTickets][' + idx + '][patientChartTicket_chartNo]" type="text" class="ticket_pct_patientChartNo" placeholder="Encounter" />' +
                '<input name="ticket[patientChartTickets][' + idx + '][patientChart]" type="hidden" class="ticket_pct_patientChart" />' +
                '</td>' +
                '<td>' +
                '<a href="javascript:void(0)" class="btn-patient-chart-list-remove">X</a>' +
                '<input name="ticket[patientChartTickets][' + idx + '][id]" type="hidden" class="ticket_pct_id" />' +
                '</td>' +
                '</tr>';

            jQ(trHtml).appendTo(jQ('#tbody-patient-chart-list'));

            // We need to use enclosure in because onSelect listener takes only the last idx
            (function(idx){

                global.autocomplete.bind(
                    ticket_form.settings.patientChart_autocompleteUrl, 'input[name="ticket[patientChartTickets][' + idx + '][patientChartTicket_chartNo]"]', 'input[name="ticket[patientChartTickets][' + idx + '][patientChart]"]', {
                        onSelect: function (d) {
                            console.log(d);
                        }
                    });
                jQ('input[name="ticket[patientChartTickets][' + idx + '][patientChartTicket_chartNo]"]').devbridgeAutocomplete('setOptions', {
                    params: {
                        patient_ids: ticket_form.settings.patient_ids.join('|'),
                    }
                });

            })(idx);
            bindRemove();
        });
    },
    bindCcAdd: function() {
        let idx = jQ('#tbody-account-user-list tr').length;

        const bindRemove = function() {
            jQ('.btn-account-user-list-remove').unbind('click').bind('click', function() {
                const tr = jQ(this).parent().parent();
                tr.find('.ticket_au_accountUser_fullName').devbridgeAutocomplete('dispose');
                tr.remove();
                var au_id = jQ(this).parent().parent().find('.ticket_au_accountUser').val();
                var index = ticket_form.settings.account_user_ids.indexOf(au_id);
                if (index !== -1) ticket_form.settings.account_user_ids.splice(index, 1);
            });
        };
        bindRemove();

        jQ('#tbody-account-user-list').each(function(i){

            // We need to use enclosure in because onSelect listener takes only the last idx
            (function(idx){
                global.autocomplete.bind(ticket_form.settings.accountUser_autocompleteUrl, 'input[name="ticket[ticketCcs][' + idx + '][ticketCcs_accountUser_fullName]"]', 'input[name="ticket[ticketCcs][' + idx + '][accountUser]"]', {
                    onSelect: function (d) {
                        ticket_form.settings.account_user_ids.push(d.id);
                    }
                });
            })(i);
        });

        jQ('#btn-ticket-add-cc').unbind('click').bind('click', function(){
            idx++;
            const trHtml =
                '<tr>' +
                '<td>' +
                '<input name="ticket[ticketCcs][' + idx + '][ticketCcs_accountUser_fullName]" type="text" class="ticket_au_accountUser_fullName" placeholder="CC" />' +
                '<input name="ticket[ticketCcs][' + idx + '][accountUser]" type="hidden" class="ticket_au_accountUser" />' +
                '</td>' +
                '<td>' +
                '<a href="javascript:void(0)" class="btn-account-user-list-remove">X</a>' +
                '<input name="ticket[ticketCcs][' + idx + '][id]" type="hidden" class="ticket_au_id" />' +
                '</td>' +
                '</tr>';

            jQ(trHtml).appendTo(jQ('#tbody-account-user-list'));

            // We need to use enclosure in because onSelect listener takes only the last idx
            (function(idx){

                global.autocomplete.bind(ticket_form.settings.accountUser_autocompleteUrl, 'input[name="ticket[ticketCcs][' + idx + '][ticketCcs_accountUser_fullName]"]', 'input[name="ticket[ticketCcs][' + idx + '][accountUser]"]', {
                    onSelect: function (d) {
                        ticket_form.settings.account_user_ids.push(d.id);
                    }
                });
            })(idx);
            bindRemove();
        });
    },
    showNotesHistory: function () {
        jQ('.notes-header').unbind('click').bind('click', function () {
            jQ('.notes-history').slideToggle();
        })
    }
};