"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.renderAutocompleteControl = renderAutocompleteControl;
/* The Autocomplete Control with decorations

This control has the buttons which control the state between editing, viewing, searching, accepting
and so on.  See the state diagram in the documentation.  The AUtocomplete Picker does the main work.

*/
const ns_1 = __importDefault(require("../../../ns"));
const iconBase_1 = require("../../../iconBase");
const solid_logic_1 = require("solid-logic");
const widgets = __importStar(require("../../../widgets"));
const utils = __importStar(require("../../../utils"));
const autocompletePicker_1 = require("./autocompletePicker"); // dbpediaParameters
const WEBID_NOUN = 'Solid ID';
const GREEN_PLUS = iconBase_1.icons.iconBase + 'noun_34653_green.svg';
const SEARCH_ICON = iconBase_1.icons.iconBase + 'noun_Search_875351.svg';
const EDIT_ICON = iconBase_1.icons.iconBase + 'noun_253504.svg';
// const DELETE_ICON = icons.iconBase + 'noun_2188_red.svg'
async function renderAutocompleteControl(dom, person, barOptions, acOptions, addOneIdAndRefresh, deleteOne) {
    async function autoCompleteDone(object, name) {
        if (acOptions.permanent) { // remember to set this in publicid panel
            (0, autocompletePicker_1.setVisible)(editButton, true);
            (0, autocompletePicker_1.setVisible)(acceptButton, false);
            (0, autocompletePicker_1.setVisible)(cancelButton, false);
        }
        else {
            // console.log('temporary - removed decoratiion')
            removeDecorated();
        }
        return addOneIdAndRefresh(object, name);
    }
    async function greenButtonHandler(_event) {
        const webid = await widgets.askName(dom, solid_logic_1.store, creationArea, ns_1.default.vcard('url'), undefined, WEBID_NOUN);
        if (!webid) {
            return; // cancelled by user
        }
        return addOneIdAndRefresh(person, webid);
    }
    function removeDecorated() {
        if (decoratedAutocomplete) {
            creationArea.removeChild(decoratedAutocomplete);
            decoratedAutocomplete = undefined;
        }
    }
    async function displayAutocomplete() {
        decoratedAutocomplete = dom.createElement('div');
        decoratedAutocomplete.setAttribute('style', 'display: flex; flex-flow: wrap;');
        decoratedAutocomplete.appendChild(await (0, autocompletePicker_1.renderAutoComplete)(dom, acOptions, decoration, autoCompleteDone));
        // console.log('@@ acceptButton', acceptButton)
        decoratedAutocomplete.appendChild(acceptButton);
        // console.log('@@ cancelButton', cancelButton)
        decoratedAutocomplete.appendChild(cancelButton);
        // console.log('@@ editButton', editButton)
        decoratedAutocomplete.appendChild(editButton);
        // console.log('@@ deleteButtonContainer', deleteButtonContainer)
        decoratedAutocomplete.appendChild(deleteButtonContainer);
        creationArea.appendChild(decoratedAutocomplete);
    }
    async function searchButtonHandler(_event) {
        if (decoratedAutocomplete) {
            creationArea.removeChild(decoratedAutocomplete);
            decoratedAutocomplete = undefined;
        }
        else {
            await displayAutocomplete();
        }
    }
    async function droppedURIHandler(uris) {
        for (const webid of uris) { // normally one but can be more than one
            await addOneIdAndRefresh(person, webid);
        }
    }
    const acceptButton = widgets.continueButton(dom);
    acceptButton.setAttribute('data-testid', 'accept-button');
    const cancelButton = widgets.cancelButton(dom);
    cancelButton.setAttribute('data-testid', 'cancel-button');
    const deleteButtonContainer = dom.createElement('div');
    const noun = acOptions.targetClass ? utils.label(acOptions.targetClass) : 'item';
    const deleteButton = widgets.deleteButtonWithCheck(dom, deleteButtonContainer, noun, deleteOne); // need to knock out this UI or caller does that
    deleteButton.setAttribute('data-testid', 'delete-button');
    const editButton = widgets.button(dom, EDIT_ICON, 'Edit', _event => {
        editing = !editing;
        syncEditingStatus();
    });
    editButton.setAttribute('data-testid', 'edit-button');
    let editing = true;
    function syncEditingStatus() {
        if (editing) {
            (0, autocompletePicker_1.setVisible)(editButton, false);
            (0, autocompletePicker_1.setVisible)(acceptButton, false); // not till got it
            (0, autocompletePicker_1.setVisible)(cancelButton, false);
        }
        else {
            (0, autocompletePicker_1.setVisible)(editButton, true);
            (0, autocompletePicker_1.setVisible)(acceptButton, false);
            (0, autocompletePicker_1.setVisible)(cancelButton, false);
        }
    }
    const decoration = {
        acceptButton, cancelButton, editButton, deleteButton
    };
    let decoratedAutocomplete = undefined;
    const creationArea = dom.createElement('div');
    creationArea.style.display = 'flex';
    creationArea.style.flexDirection = 'row';
    if (acOptions.permanent || acOptions.currentObject) {
        await displayAutocomplete();
    }
    if (barOptions.editable) {
        // creationArea.appendChild(await renderAutoComplete(dom, barOptions, autoCompleteDone)) wait for searchButton
        creationArea.style.width = '100%';
        if (barOptions.manualURIEntry) {
            const plus = creationArea.appendChild(widgets.button(dom, GREEN_PLUS, barOptions.idNoun, greenButtonHandler));
            widgets.makeDropTarget(plus, droppedURIHandler, undefined);
        }
        if (barOptions.dbLookup && !acOptions.currentObject && !acOptions.permanent) {
            creationArea.appendChild(widgets.button(dom, SEARCH_ICON, barOptions.idNoun, searchButtonHandler));
        }
    }
    syncEditingStatus();
    return creationArea;
} // renderAutocompleteControl
// ends
//# sourceMappingURL=autocompleteBar.js.map