var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
/* 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.

*/
import ns from '../../../ns';
import { icons } from '../../../iconBase';
import { store } from 'solid-logic';
import * as widgets from '../../../widgets';
import * as utils from '../../../utils';
import { renderAutoComplete, setVisible } from './autocompletePicker'; // dbpediaParameters
const WEBID_NOUN = 'Solid ID';
const GREEN_PLUS = icons.iconBase + 'noun_34653_green.svg';
const SEARCH_ICON = icons.iconBase + 'noun_Search_875351.svg';
const EDIT_ICON = icons.iconBase + 'noun_253504.svg';
// const DELETE_ICON = icons.iconBase + 'noun_2188_red.svg'
export function renderAutocompleteControl(dom, person, barOptions, acOptions, addOneIdAndRefresh, deleteOne) {
    return __awaiter(this, void 0, void 0, function* () {
        function autoCompleteDone(object, name) {
            return __awaiter(this, void 0, void 0, function* () {
                if (acOptions.permanent) { // remember to set this in publicid panel
                    setVisible(editButton, true);
                    setVisible(acceptButton, false);
                    setVisible(cancelButton, false);
                }
                else {
                    // console.log('temporary - removed decoratiion')
                    removeDecorated();
                }
                return addOneIdAndRefresh(object, name);
            });
        }
        function greenButtonHandler(_event) {
            return __awaiter(this, void 0, void 0, function* () {
                const webid = yield widgets.askName(dom, store, creationArea, ns.vcard('url'), undefined, WEBID_NOUN);
                if (!webid) {
                    return; // cancelled by user
                }
                return addOneIdAndRefresh(person, webid);
            });
        }
        function removeDecorated() {
            if (decoratedAutocomplete) {
                creationArea.removeChild(decoratedAutocomplete);
                decoratedAutocomplete = undefined;
            }
        }
        function displayAutocomplete() {
            return __awaiter(this, void 0, void 0, function* () {
                decoratedAutocomplete = dom.createElement('div');
                decoratedAutocomplete.setAttribute('style', 'display: flex; flex-flow: wrap;');
                decoratedAutocomplete.appendChild(yield 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);
            });
        }
        function searchButtonHandler(_event) {
            return __awaiter(this, void 0, void 0, function* () {
                if (decoratedAutocomplete) {
                    creationArea.removeChild(decoratedAutocomplete);
                    decoratedAutocomplete = undefined;
                }
                else {
                    yield displayAutocomplete();
                }
            });
        }
        function droppedURIHandler(uris) {
            return __awaiter(this, void 0, void 0, function* () {
                for (const webid of uris) { // normally one but can be more than one
                    yield 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) {
                setVisible(editButton, false);
                setVisible(acceptButton, false); // not till got it
                setVisible(cancelButton, false);
            }
            else {
                setVisible(editButton, true);
                setVisible(acceptButton, false);
                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) {
            yield 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