import { addClass, removeClass, drawSvgStringAsElement } from "@matdata/yasgui-utils";
import "./TabSettingsModal.scss";
const AcceptOptionsMap = [
    { key: "JSON", value: "application/sparql-results+json" },
    { key: "XML", value: "application/sparql-results+xml" },
    { key: "CSV", value: "text/csv" },
    { key: "TSV", value: "text/tab-separated-values" },
];
const AcceptHeaderGraphMap = [
    { key: "Turtle", value: "text/turtle,*/*;q=0.9" },
    { key: "JSON", value: "application/rdf+json,*/*;q=0.9" },
    { key: "RDF/XML", value: "application/rdf+xml,*/*;q=0.9" },
    { key: "TriG", value: "application/trig,*/*;q=0.9" },
    { key: "N-Triples", value: "application/n-triples,*/*;q=0.9" },
    { key: "N-Quads", value: "application/n-quads,*/*;q=0.9" },
    { key: "CSV", value: "text/csv,*/*;q=0.9" },
    { key: "TSV", value: "text/tab-separated-values,*/*;q=0.9" },
];
export default class TabSettingsModal {
    constructor(tab, controlBarEl) {
        this.tab = tab;
        this.init(controlBarEl);
    }
    init(controlBarEl) {
        this.settingsButton = document.createElement("button");
        this.settingsButton.setAttribute("aria-label", "Settings");
        this.settingsButton.title = "Settings";
        this.settingsButton.appendChild(drawSvgStringAsElement(`<svg width="100.06" height="100.05" data-name="Layer 1" version="1.1" viewBox="0 0 100.06 100.05" xmlns="http://www.w3.org/2000/svg">
        <title>Settings</title>
        <path d="m95.868 58.018-3-3.24a42.5 42.5 0 0 0 0-9.43l3-3.22c1.79-1.91 5-4.44 4-6.85l-4.11-10c-1-2.41-5.08-1.91-7.69-2l-4.43-0.16a43.24 43.24 0 0 0-6.64-6.66l-0.14-4.43c-0.08-2.6 0.43-6.69-2-7.69l-10-4.15c-2.4-1-4.95 2.25-6.85 4l-3.23 3a42.49 42.49 0 0 0-9.44 0l-3.21-3c-1.9-1.78-4.44-5-6.85-4l-10 4.11c-2.41 1-1.9 5.09-2 7.69l-0.16 4.42a43.24 43.24 0 0 0-6.67 6.65l-4.42 0.14c-2.6 0.08-6.69-0.43-7.69 2l-4.15 10c-1 2.4 2.25 4.94 4 6.84l3 3.23a42.49 42.49 0 0 0 0 9.44l-3 3.22c-1.78 1.9-5 4.43-4 6.84l4.11 10c1 2.41 5.09 1.91 7.7 2l4.41 0.15a43.24 43.24 0 0 0 6.66 6.68l0.13 4.41c0.08 2.6-0.43 6.7 2 7.7l10 4.15c2.4 1 4.94-2.25 6.84-4l3.24-3a42.5 42.5 0 0 0 9.42 0l3.22 3c1.91 1.79 4.43 5 6.84 4l10-4.11c2.41-1 1.91-5.08 2-7.7l0.15-4.42a43.24 43.24 0 0 0 6.68-6.65l4.42-0.14c2.6-0.08 6.7 0.43 7.7-2l4.15-10c1.04-2.36-2.22-4.9-3.99-6.82zm-45.74 15.7c-12.66 0-22.91-10.61-22.91-23.7s10.25-23.7 22.91-23.7 22.91 10.61 22.91 23.7-10.25 23.7-22.91 23.7z"/>
       </svg>`));
        addClass(this.settingsButton, "tabContextButton");
        controlBarEl.appendChild(this.settingsButton);
        this.settingsButton.onclick = () => this.open();
        this.prefixButton = document.createElement("button");
        this.prefixButton.setAttribute("aria-label", "Insert Prefixes");
        this.prefixButton.title = "Insert saved prefixes into query";
        this.prefixButton.textContent = "PREFIX";
        addClass(this.prefixButton, "tabPrefixButton");
        controlBarEl.appendChild(this.prefixButton);
        this.prefixButton.onclick = () => this.insertPrefixesIntoQuery();
        this.createModal();
    }
    createModal() {
        this.modalOverlay = document.createElement("div");
        addClass(this.modalOverlay, "tabSettingsModalOverlay");
        this.modalOverlay.onclick = () => this.close();
        this.modalContent = document.createElement("div");
        addClass(this.modalContent, "tabSettingsModal");
        this.modalContent.onclick = (e) => e.stopPropagation();
        const header = document.createElement("div");
        addClass(header, "modalHeader");
        const title = document.createElement("h2");
        title.textContent = "Tab Settings";
        header.appendChild(title);
        const closeBtn = document.createElement("button");
        closeBtn.textContent = "×";
        addClass(closeBtn, "closeButton");
        closeBtn.onclick = () => this.close();
        header.appendChild(closeBtn);
        this.modalContent.appendChild(header);
        const body = document.createElement("div");
        addClass(body, "modalBody");
        const tabsContainer = document.createElement("div");
        addClass(tabsContainer, "modalTabs");
        const requestTab = document.createElement("button");
        requestTab.textContent = "Request";
        addClass(requestTab, "modalTabButton", "active");
        requestTab.onclick = () => this.switchTab("request");
        const prefixTab = document.createElement("button");
        prefixTab.textContent = "Prefixes";
        addClass(prefixTab, "modalTabButton");
        prefixTab.onclick = () => this.switchTab("prefix");
        tabsContainer.appendChild(requestTab);
        tabsContainer.appendChild(prefixTab);
        body.appendChild(tabsContainer);
        const requestContent = document.createElement("div");
        addClass(requestContent, "modalTabContent", "active");
        requestContent.id = "request-content";
        this.drawRequestSettings(requestContent);
        const prefixContent = document.createElement("div");
        addClass(prefixContent, "modalTabContent");
        prefixContent.id = "prefix-content";
        this.drawPrefixSettings(prefixContent);
        body.appendChild(requestContent);
        body.appendChild(prefixContent);
        this.modalContent.appendChild(body);
        const footer = document.createElement("div");
        addClass(footer, "modalFooter");
        const saveBtn = document.createElement("button");
        saveBtn.textContent = "Save";
        addClass(saveBtn, "primaryButton");
        saveBtn.onclick = () => this.save();
        const cancelBtn = document.createElement("button");
        cancelBtn.textContent = "Cancel";
        addClass(cancelBtn, "secondaryButton");
        cancelBtn.onclick = () => this.close();
        footer.appendChild(cancelBtn);
        footer.appendChild(saveBtn);
        this.modalContent.appendChild(footer);
        this.modalOverlay.appendChild(this.modalContent);
        document.body.appendChild(this.modalOverlay);
    }
    switchTab(tabName) {
        const buttons = this.modalContent.querySelectorAll(".modalTabButton");
        const contents = this.modalContent.querySelectorAll(".modalTabContent");
        buttons.forEach((btn, index) => {
            if ((tabName === "request" && index === 0) || (tabName === "prefix" && index === 1)) {
                addClass(btn, "active");
            }
            else {
                removeClass(btn, "active");
            }
        });
        contents.forEach((content) => {
            if (content.id === `${tabName}-content`) {
                addClass(content, "active");
            }
            else {
                removeClass(content, "active");
            }
        });
    }
    drawPrefixSettings(container) {
        const section = document.createElement("div");
        addClass(section, "settingsSection");
        const label = document.createElement("label");
        label.textContent = "Saved Prefixes";
        addClass(label, "settingsLabel");
        const help = document.createElement("div");
        help.textContent = "Enter PREFIX declarations (one per line). These will be available for insertion into queries.";
        addClass(help, "settingsHelp");
        this.prefixTextarea = document.createElement("textarea");
        addClass(this.prefixTextarea, "prefixTextarea");
        this.prefixTextarea.placeholder =
            "PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>\nPREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>";
        this.prefixTextarea.rows = 10;
        const checkboxContainer = document.createElement("div");
        addClass(checkboxContainer, "checkboxContainer");
        this.autoCaptureCheckbox = document.createElement("input");
        this.autoCaptureCheckbox.type = "checkbox";
        this.autoCaptureCheckbox.id = "autoCapturePrefixes";
        const checkboxLabel = document.createElement("label");
        checkboxLabel.htmlFor = "autoCapturePrefixes";
        checkboxLabel.textContent = "Automatically capture new prefixes from query editor";
        checkboxContainer.appendChild(this.autoCaptureCheckbox);
        checkboxContainer.appendChild(checkboxLabel);
        section.appendChild(label);
        section.appendChild(help);
        section.appendChild(this.prefixTextarea);
        section.appendChild(checkboxContainer);
        container.appendChild(section);
    }
    drawRequestSettings(container) {
        const reqConfig = this.tab.getRequestConfig();
        const methodSection = this.createSection("Request Method");
        const methodSelect = this.createSelect(["GET", "POST"], typeof reqConfig.method === "function" ? "POST" : reqConfig.method);
        methodSelect.setAttribute("data-config", "method");
        methodSection.appendChild(methodSelect);
        container.appendChild(methodSection);
        const acceptSection = this.createSection("Accept Header (SELECT/ASK)");
        const acceptSelect = this.createOptionsSelect(AcceptOptionsMap, reqConfig.acceptHeaderSelect);
        acceptSelect.setAttribute("data-config", "acceptHeaderSelect");
        acceptSection.appendChild(acceptSelect);
        container.appendChild(acceptSection);
        const acceptGraphSection = this.createSection("Accept Header (CONSTRUCT/DESCRIBE)");
        const acceptGraphSelect = this.createOptionsSelect(AcceptHeaderGraphMap, reqConfig.acceptHeaderGraph);
        acceptGraphSelect.setAttribute("data-config", "acceptHeaderGraph");
        acceptGraphSection.appendChild(acceptGraphSelect);
        container.appendChild(acceptGraphSection);
    }
    createSection(title) {
        const section = document.createElement("div");
        addClass(section, "settingsSection");
        const label = document.createElement("div");
        addClass(label, "settingsLabel");
        label.textContent = title;
        section.appendChild(label);
        return section;
    }
    createSelect(options, selected) {
        const select = document.createElement("select");
        addClass(select, "settingsSelect");
        options.forEach((opt) => {
            const option = document.createElement("option");
            option.value = opt;
            option.textContent = opt;
            if (opt === selected)
                option.selected = true;
            select.appendChild(option);
        });
        return select;
    }
    createOptionsSelect(options, selected) {
        const select = document.createElement("select");
        addClass(select, "settingsSelect");
        options.forEach((opt) => {
            const option = document.createElement("option");
            option.value = opt.value;
            option.textContent = opt.key;
            if (opt.value === selected)
                option.selected = true;
            select.appendChild(option);
        });
        return select;
    }
    open() {
        this.loadSettings();
        addClass(this.modalOverlay, "open");
    }
    close() {
        removeClass(this.modalOverlay, "open");
    }
    loadSettings() {
        let prefixes = this.tab.yasgui.persistentConfig.getPrefixes();
        const autoCapture = this.tab.yasgui.persistentConfig.getAutoCaptureEnabled();
        if (!prefixes || prefixes.trim().length === 0) {
            prefixes = `PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>\nPREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>`;
            this.tab.yasgui.persistentConfig.setPrefixes(prefixes);
        }
        this.prefixTextarea.value = prefixes;
        this.autoCaptureCheckbox.checked = autoCapture;
    }
    save() {
        const prefixText = this.prefixTextarea.value;
        const autoCapture = this.autoCaptureCheckbox.checked;
        const deduplicated = this.deduplicatePrefixes(prefixText);
        this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
        this.tab.yasgui.persistentConfig.setAutoCaptureEnabled(autoCapture);
        const requestContent = this.modalContent.querySelector("#request-content");
        if (requestContent) {
            const selects = requestContent.querySelectorAll("select[data-config]");
            const updates = {};
            selects.forEach((select) => {
                const config = select.getAttribute("data-config");
                if (config) {
                    updates[config] = select.value;
                }
            });
            this.tab.setRequestConfig(updates);
        }
        this.close();
    }
    deduplicatePrefixes(prefixText) {
        const lines = prefixText.split("\n");
        const seen = new Map();
        const result = [];
        for (const line of lines) {
            const trimmed = line.trim();
            if (!trimmed)
                continue;
            const match = trimmed.match(/^\s*PREFIX\s+(\w+):\s*<(.+)>\s*$/i);
            if (match) {
                const label = match[1].toLowerCase();
                if (!seen.has(label)) {
                    seen.set(label, trimmed);
                    result.push(trimmed);
                }
            }
            else {
                result.push(trimmed);
            }
        }
        return result.join("\n");
    }
    insertPrefixesIntoQuery() {
        const yasqe = this.tab.getYasqe();
        if (!yasqe)
            return;
        const savedPrefixes = this.tab.yasgui.persistentConfig.getPrefixes();
        if (!savedPrefixes.trim())
            return;
        const currentQuery = yasqe.getValue();
        const lines = currentQuery.split("\n");
        let firstNonPrefixLine = 0;
        for (let i = 0; i < lines.length; i++) {
            const trimmed = lines[i].trim();
            if (trimmed.length > 0 && !trimmed.toUpperCase().startsWith("PREFIX")) {
                firstNonPrefixLine = i;
                break;
            }
        }
        if (firstNonPrefixLine === 0 && lines.length > 0) {
            const hasContent = lines.some((line) => line.trim().length > 0);
            if (!hasContent ||
                lines.every((line) => line.trim().length === 0 || line.trim().toUpperCase().startsWith("PREFIX"))) {
                firstNonPrefixLine = lines.length;
            }
        }
        const restOfQuery = lines.slice(firstNonPrefixLine).join("\n").trim();
        const newQuery = savedPrefixes + (restOfQuery ? "\n\n" + restOfQuery : "");
        yasqe.setValue(newQuery);
        yasqe.focus();
    }
    capturePrefixesFromQuery() {
        const autoCapture = this.tab.yasgui.persistentConfig.getAutoCaptureEnabled();
        if (!autoCapture)
            return;
        const yasqe = this.tab.getYasqe();
        if (!yasqe)
            return;
        const queryPrefixes = yasqe.getPrefixesFromQuery();
        if (!queryPrefixes || Object.keys(queryPrefixes).length === 0)
            return;
        const newPrefixLines = [];
        for (const [label, uri] of Object.entries(queryPrefixes)) {
            newPrefixLines.push(`PREFIX ${label}: <${uri}>`);
        }
        const existingPrefixes = this.tab.yasgui.persistentConfig.getPrefixes();
        const combined = existingPrefixes + "\n" + newPrefixLines.join("\n");
        const deduplicated = this.deduplicatePrefixes(combined);
        this.tab.yasgui.persistentConfig.setPrefixes(deduplicated);
    }
    destroy() {
        if (this.modalOverlay && this.modalOverlay.parentNode) {
            this.modalOverlay.parentNode.removeChild(this.modalOverlay);
        }
    }
}
//# sourceMappingURL=TabSettingsModal.js.map