var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { UmbDocumentTypeImportRepository } from '../repository/document-type-import.repository.js';
import { css, html, customElement, state, when } from '../../../../../../external/lit/index.js';
import { UmbTextStyles } from '../../../../../core/style/index.js';
import { UmbModalBaseElement } from '../../../../../core/modal/index.js';
let UmbDocumentTypeImportModalLayout = class UmbDocumentTypeImportModalLayout extends UmbModalBaseElement {
    #documentTypeImportRepository;
    #temporaryUnique;
    #fileReader;
    constructor() {
        super();
        this.#documentTypeImportRepository = new UmbDocumentTypeImportRepository(this);
        this._fileContent = [];
        this.#fileReader = new FileReader();
        this.#fileReader.onload = (e) => {
            if (typeof e.target?.result === 'string') {
                const fileContent = e.target.result;
                this.#documentTypePreviewBuilder(fileContent);
            }
            else {
                this.#requestReset();
            }
        };
    }
    #onUploadComplete(evt) {
        evt.preventDefault();
        const target = evt.target;
        const data = target.value;
        if (!data?.length)
            return;
        const file = data[0];
        if (file.temporaryFile) {
            this.#temporaryUnique = file.temporaryFile.temporaryUnique;
            this.#fileReader.readAsText(file.temporaryFile.file);
        }
    }
    async #onFileImport() {
        if (!this.#temporaryUnique)
            return;
        const { error } = await this.#documentTypeImportRepository.requestImport(this.#temporaryUnique);
        if (error)
            return;
        this._submitModal();
    }
    #documentTypePreviewBuilder(htmlString) {
        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlString, 'text/xml');
        const elements = doc.childNodes;
        const documentTypes = [];
        elements.forEach((node) => {
            if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'DocumentType') {
                documentTypes.push(node);
            }
        });
        this._fileContent = this.#documentTypePreviewItemBuilder(documentTypes);
    }
    #documentTypePreviewItemBuilder(elements) {
        const documentTypes = [];
        elements.forEach((documentType) => {
            const info = documentType.getElementsByTagName('Info')[0];
            const unique = info.getElementsByTagName('Key')[0].textContent ?? '';
            const name = info.getElementsByTagName('Name')[0].textContent ?? '';
            const alias = info.getElementsByTagName('Alias')[0].textContent ?? '';
            const icon = info.getElementsByTagName('Icon')[0].textContent ?? '';
            documentTypes.push({ unique, name, alias, icon });
        });
        return documentTypes;
    }
    #requestReset() {
        this._fileContent = [];
        this.#temporaryUnique = undefined;
    }
    render() {
        return html ` <umb-body-layout headline=${this.localize.term('general_import')}>
			<uui-box> ${this.#renderUploadZone()} </uui-box>
			<uui-button
				slot="actions"
				type="button"
				label=${this.localize.term('general_cancel')}
				@click=${this._rejectModal}></uui-button>
			<uui-button
				slot="actions"
				type="button"
				look="primary"
				?disabled=${!this.#temporaryUnique}
				label=${this.localize.term('actions_importdocumenttype')}
				@click=${this.#onFileImport}></uui-button>
		</umb-body-layout>`;
    }
    #renderUploadZone() {
        return html `
			${when(this._fileContent.length, () => html `<uui-ref-node-document-type
						name=${this._fileContent[0].name}
						alias=${this._fileContent[0].alias}
						readonly
						standalone>
						<umb-icon slot="icon" name=${this._fileContent[0].icon}></umb-icon>
						<uui-button
							slot="actions"
							@click=${this.#requestReset}
							label=${this.localize.term('general_remove')}></uui-button>
					</uui-ref-node-document-type>`, () => html `<div id="wrapper">
						<umb-input-dropzone id="dropzone" accept=".udt" @change=${this.#onUploadComplete}
							><umb-localize slot="text" key="media_dragAndDropYourFilesIntoTheArea"
								>Drag and drop your file(s) into the area
							</umb-localize></umb-input-dropzone
						>
					</div>`)}
		`;
    }
    static { this.styles = [
        UmbTextStyles,
        css `
			#wrapper {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				position: relative;
				gap: var(--uui-size-space-3);
				border: 2px dashed var(--uui-color-divider-standalone);
				background-color: var(--uui-color-surface-alt);
				padding: var(--uui-size-space-6);
			}

			#dropzone {
				width: 100%;
			}

			#import {
				margin-top: var(--uui-size-space-6);
			}
		`,
    ]; }
};
__decorate([
    state()
], UmbDocumentTypeImportModalLayout.prototype, "_fileContent", void 0);
UmbDocumentTypeImportModalLayout = __decorate([
    customElement('umb-document-type-import-modal')
], UmbDocumentTypeImportModalLayout);
export { UmbDocumentTypeImportModalLayout };
export default UmbDocumentTypeImportModalLayout;
