"use strict";
/* eslint-disable @typescript-eslint/no-non-null-assertion, unicorn/prefer-module */
Object.defineProperty(exports, "__esModule", { value: true });
let lotOccupancyOccupants;
const openEditLotOccupancyOccupant = (clickEvent) => {
    const lotOccupantIndex = Number.parseInt(clickEvent.currentTarget.closest('tr').dataset
        .lotOccupantIndex, 10);
    const lotOccupancyOccupant = lotOccupancyOccupants.find((currentLotOccupancyOccupant) => {
        return currentLotOccupancyOccupant.lotOccupantIndex === lotOccupantIndex;
    });
    let editFormElement;
    let editCloseModalFunction;
    const editOccupant = (submitEvent) => {
        submitEvent.preventDefault();
        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doUpdateLotOccupancyOccupant', editFormElement, (responseJSON) => {
            if (responseJSON.success) {
                lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                editCloseModalFunction();
                renderLotOccupancyOccupants();
            }
            else {
                bulmaJS.alert({
                    title: 'Error Updating ' + exports.aliases.occupant,
                    message: responseJSON.errorMessage || '',
                    contextualColorName: 'danger'
                });
            }
        });
    };
    cityssm.openHtmlModal('lotOccupancy-editOccupant', {
        onshow: (modalElement) => {
            los.populateAliases(modalElement);
            modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupancyId').value = lotOccupancyId;
            modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantIndex').value = lotOccupantIndex.toString();
            const lotOccupantTypeSelectElement = modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId');
            let lotOccupantTypeSelected = false;
            for (const lotOccupantType of exports.lotOccupantTypes) {
                const optionElement = document.createElement('option');
                optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                optionElement.textContent = lotOccupantType.lotOccupantType;
                if (lotOccupantType.lotOccupantTypeId ===
                    lotOccupancyOccupant.lotOccupantTypeId) {
                    optionElement.selected = true;
                    lotOccupantTypeSelected = true;
                }
                lotOccupantTypeSelectElement.append(optionElement);
            }
            if (!lotOccupantTypeSelected) {
                const optionElement = document.createElement('option');
                optionElement.value = lotOccupancyOccupant.lotOccupantTypeId.toString();
                optionElement.textContent =
                    lotOccupancyOccupant.lotOccupantType;
                optionElement.selected = true;
                lotOccupantTypeSelectElement.append(optionElement);
            }
            ;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantName').value = lotOccupancyOccupant.occupantName;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress1').value = lotOccupancyOccupant.occupantAddress1;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantAddress2').value = lotOccupancyOccupant.occupantAddress2;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantCity').value = lotOccupancyOccupant.occupantCity;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantProvince').value = lotOccupancyOccupant.occupantProvince;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPostalCode').value = lotOccupancyOccupant.occupantPostalCode;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantPhoneNumber').value = lotOccupancyOccupant.occupantPhoneNumber;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantEmailAddress').value = lotOccupancyOccupant.occupantEmailAddress;
            modalElement.querySelector('#lotOccupancyOccupantEdit--occupantComment').value = lotOccupancyOccupant.occupantComment;
        },
        onshown: (modalElement, closeModalFunction) => {
            bulmaJS.toggleHtmlClipped();
            modalElement.querySelector('#lotOccupancyOccupantEdit--lotOccupantTypeId').focus();
            editFormElement = modalElement.querySelector('form');
            editFormElement.addEventListener('submit', editOccupant);
            editCloseModalFunction = closeModalFunction;
        },
        onremoved: () => {
            bulmaJS.toggleHtmlClipped();
        }
    });
};
const deleteLotOccupancyOccupant = (clickEvent) => {
    const lotOccupantIndex = clickEvent.currentTarget.closest('tr').dataset.lotOccupantIndex;
    const doDelete = () => {
        cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doDeleteLotOccupancyOccupant', {
            lotOccupancyId,
            lotOccupantIndex
        }, (responseJSON) => {
            if (responseJSON.success) {
                lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                renderLotOccupancyOccupants();
            }
            else {
                bulmaJS.alert({
                    title: 'Error Removing ' + exports.aliases.occupant,
                    message: responseJSON.errorMessage || '',
                    contextualColorName: 'danger'
                });
            }
        });
    };
    bulmaJS.confirm({
        title: 'Remove ' + exports.aliases.occupant + '?',
        message: 'Are you sure you want to remove this ' +
            exports.aliases.occupant.toLowerCase() +
            '?',
        okButton: {
            text: 'Yes, Remove ' + exports.aliases.occupant,
            callbackFunction: doDelete
        },
        contextualColorName: 'warning'
    });
};
const renderLotOccupancyOccupants = () => {
    const occupantsContainer = document.querySelector('#container--lotOccupancyOccupants');
    cityssm.clearElement(occupantsContainer);
    if (lotOccupancyOccupants.length === 0) {
        occupantsContainer.innerHTML =
            '<div class="message is-warning">' +
                '<p class="message-body">There are no ' +
                exports.aliases.occupants.toLowerCase() +
                ' associated with this record.</p>' +
                '</div>';
        return;
    }
    const tableElement = document.createElement('table');
    tableElement.className = 'table is-fullwidth is-striped is-hoverable';
    tableElement.innerHTML =
        '<thead><tr>' +
            ('<th>' + exports.aliases.occupant + '</th>') +
            '<th>Address</th>' +
            '<th>Other Contact</th>' +
            '<th>Comment</th>' +
            '<th class="is-hidden-print"><span class="is-sr-only">Options</span></th>' +
            '</tr></thead>' +
            '<tbody></tbody>';
    for (const lotOccupancyOccupant of lotOccupancyOccupants) {
        const tableRowElement = document.createElement('tr');
        tableRowElement.dataset.lotOccupantIndex =
            lotOccupancyOccupant.lotOccupantIndex.toString();
        tableRowElement.innerHTML =
            '<td>' +
                cityssm.escapeHTML(lotOccupancyOccupant.occupantName || '(No Name)') +
                '<br />' +
                ('<span class="tag">' +
                    '<i class="fas fa-fw fa-' +
                    cityssm.escapeHTML(lotOccupancyOccupant.fontAwesomeIconClass) +
                    '" aria-hidden="true"></i>' +
                    ' <span class="ml-1">' +
                    cityssm.escapeHTML(lotOccupancyOccupant.lotOccupantType) +
                    '</span>' +
                    '</span>') +
                '</td>' +
                ('<td>' +
                    (lotOccupancyOccupant.occupantAddress1
                        ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress1) + '<br />'
                        : '') +
                    (lotOccupancyOccupant.occupantAddress2
                        ? cityssm.escapeHTML(lotOccupancyOccupant.occupantAddress2) + '<br />'
                        : '') +
                    (lotOccupancyOccupant.occupantCity
                        ? cityssm.escapeHTML(lotOccupancyOccupant.occupantCity) + ', '
                        : '') +
                    cityssm.escapeHTML(lotOccupancyOccupant.occupantProvince || '') +
                    '<br />' +
                    cityssm.escapeHTML(lotOccupancyOccupant.occupantPostalCode || '') +
                    '</td>') +
                ('<td>' +
                    (lotOccupancyOccupant.occupantPhoneNumber
                        ? cityssm.escapeHTML(lotOccupancyOccupant.occupantPhoneNumber) +
                            '<br />'
                        : '') +
                    (lotOccupancyOccupant.occupantEmailAddress
                        ? cityssm.escapeHTML(lotOccupancyOccupant.occupantEmailAddress)
                        : '') +
                    '</td>') +
                ('<td>' +
                    cityssm.escapeHTML(lotOccupancyOccupant.occupantComment) +
                    '</td>') +
                ('<td class="is-hidden-print">' +
                    '<div class="buttons are-small is-justify-content-end">' +
                    ('<button class="button is-primary button--edit" type="button">' +
                        '<span class="icon is-small"><i class="fas fa-pencil-alt" aria-hidden="true"></i></span>' +
                        ' <span>Edit</span>' +
                        '</button>') +
                    ('<button class="button is-light is-danger button--delete" data-tooltip="Delete ' +
                        cityssm.escapeHTML(exports.aliases.occupant) +
                        '" type="button" aria-label="Delete">' +
                        '<i class="fas fa-trash" aria-hidden="true"></i>' +
                        '</button>') +
                    '</div>' +
                    '</td>');
        tableRowElement
            .querySelector('.button--edit')
            .addEventListener('click', openEditLotOccupancyOccupant);
        tableRowElement
            .querySelector('.button--delete')
            .addEventListener('click', deleteLotOccupancyOccupant);
        tableElement.querySelector('tbody').append(tableRowElement);
    }
    occupantsContainer.append(tableElement);
};
if (isCreate) {
    const lotOccupantTypeIdElement = document.querySelector('#lotOccupancy--lotOccupantTypeId');
    lotOccupantTypeIdElement.addEventListener('change', () => {
        const occupantFields = formElement.querySelectorAll("[data-table='LotOccupancyOccupant']");
        for (const occupantField of occupantFields) {
            occupantField.disabled = lotOccupantTypeIdElement.value === '';
        }
    });
}
else {
    lotOccupancyOccupants = exports.lotOccupancyOccupants;
    delete exports.lotOccupancyOccupants;
    document
        .querySelector('#button--addOccupant')
        .addEventListener('click', () => {
        let addCloseModalFunction;
        let addFormElement;
        let searchFormElement;
        let searchResultsElement;
        const addOccupant = (formOrObject) => {
            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doAddLotOccupancyOccupant', formOrObject, (responseJSON) => {
                if (responseJSON.success) {
                    lotOccupancyOccupants = responseJSON.lotOccupancyOccupants;
                    addCloseModalFunction();
                    renderLotOccupancyOccupants();
                }
                else {
                    bulmaJS.alert({
                        title: 'Error Adding ' + exports.aliases.occupant,
                        message: responseJSON.errorMessage || '',
                        contextualColorName: 'danger'
                    });
                }
            });
        };
        const addOccupantFromForm = (submitEvent) => {
            submitEvent.preventDefault();
            addOccupant(addFormElement);
        };
        let pastOccupantSearchResults = [];
        const addOccupantFromCopy = (clickEvent) => {
            clickEvent.preventDefault();
            const panelBlockElement = clickEvent.currentTarget;
            const occupant = pastOccupantSearchResults[Number.parseInt(panelBlockElement.dataset.index, 10)];
            const lotOccupantTypeId = panelBlockElement
                .closest('.modal')
                .querySelector('#lotOccupancyOccupantCopy--lotOccupantTypeId').value;
            if (lotOccupantTypeId === '') {
                bulmaJS.alert({
                    title: 'No ' + exports.aliases.occupant + ' Type Selected',
                    message: 'Select a type to apply to the newly added ' +
                        exports.aliases.occupant.toLowerCase() +
                        '.',
                    contextualColorName: 'warning'
                });
            }
            else {
                occupant.lotOccupantTypeId = Number.parseInt(lotOccupantTypeId, 10);
                occupant.lotOccupancyId = Number.parseInt(lotOccupancyId, 10);
                addOccupant(occupant);
            }
        };
        const searchOccupants = (event) => {
            event.preventDefault();
            if (searchFormElement.querySelector('#lotOccupancyOccupantCopy--searchFilter').value === '') {
                searchResultsElement.innerHTML =
                    '<div class="message is-info">' +
                        '<p class="message-body">Enter a partial name or address in the search field above.</p>' +
                        '</div>';
                return;
            }
            searchResultsElement.innerHTML =
                los.getLoadingParagraphHTML('Searching...');
            cityssm.postJSON(los.urlPrefix + '/lotOccupancies/doSearchPastOccupants', searchFormElement, (responseJSON) => {
                pastOccupantSearchResults = responseJSON.occupants;
                const panelElement = document.createElement('div');
                panelElement.className = 'panel';
                for (const [index, occupant] of pastOccupantSearchResults.entries()) {
                    const panelBlockElement = document.createElement('a');
                    panelBlockElement.className = 'panel-block is-block';
                    panelBlockElement.dataset.index = index.toString();
                    panelBlockElement.innerHTML =
                        '<strong>' +
                            cityssm.escapeHTML(occupant.occupantName || '') +
                            '</strong>' +
                            '<br />' +
                            '<div class="columns">' +
                            ('<div class="column">' +
                                cityssm.escapeHTML(occupant.occupantAddress1 || '') +
                                '<br />' +
                                (occupant.occupantAddress2
                                    ? cityssm.escapeHTML(occupant.occupantAddress2) + '<br />'
                                    : '') +
                                cityssm.escapeHTML(occupant.occupantCity || '') +
                                ', ' +
                                cityssm.escapeHTML(occupant.occupantProvince || '') +
                                '<br />' +
                                cityssm.escapeHTML(occupant.occupantPostalCode || '') +
                                '</div>') +
                            ('<div class="column">' +
                                (occupant.occupantPhoneNumber
                                    ? cityssm.escapeHTML(occupant.occupantPhoneNumber) +
                                        '<br />'
                                    : '') +
                                cityssm.escapeHTML(occupant.occupantEmailAddress || '') +
                                '<br />' +
                                '</div>') +
                            '</div>';
                    panelBlockElement.addEventListener('click', addOccupantFromCopy);
                    panelElement.append(panelBlockElement);
                }
                searchResultsElement.innerHTML = '';
                searchResultsElement.append(panelElement);
            });
        };
        cityssm.openHtmlModal('lotOccupancy-addOccupant', {
            onshow: (modalElement) => {
                los.populateAliases(modalElement);
                modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupancyId').value = lotOccupancyId;
                const lotOccupantTypeSelectElement = modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId');
                const lotOccupantTypeCopySelectElement = modalElement.querySelector('#lotOccupancyOccupantCopy--lotOccupantTypeId');
                for (const lotOccupantType of exports.lotOccupantTypes) {
                    const optionElement = document.createElement('option');
                    optionElement.value = lotOccupantType.lotOccupantTypeId.toString();
                    optionElement.textContent = lotOccupantType.lotOccupantType;
                    lotOccupantTypeSelectElement.append(optionElement);
                    lotOccupantTypeCopySelectElement.append(optionElement.cloneNode(true));
                }
                ;
                modalElement.querySelector('#lotOccupancyOccupantAdd--occupantCity').value = exports.occupantCityDefault;
                modalElement.querySelector('#lotOccupancyOccupantAdd--occupantProvince').value = exports.occupantProvinceDefault;
            },
            onshown: (modalElement, closeModalFunction) => {
                bulmaJS.toggleHtmlClipped();
                bulmaJS.init(modalElement);
                modalElement.querySelector('#lotOccupancyOccupantAdd--lotOccupantTypeId').focus();
                addFormElement = modalElement.querySelector('#form--lotOccupancyOccupantAdd');
                addFormElement.addEventListener('submit', addOccupantFromForm);
                searchResultsElement = modalElement.querySelector('#lotOccupancyOccupantCopy--searchResults');
                searchFormElement = modalElement.querySelector('#form--lotOccupancyOccupantCopy');
                searchFormElement.addEventListener('submit', (formEvent) => {
                    formEvent.preventDefault();
                });
                modalElement.querySelector('#lotOccupancyOccupantCopy--searchFilter').addEventListener('change', searchOccupants);
                addCloseModalFunction = closeModalFunction;
            },
            onremoved: () => {
                bulmaJS.toggleHtmlClipped();
            }
        });
    });
    renderLotOccupancyOccupants();
}