import { h } from "@stencil/core";
import { guid } from "../../utils";
export class DgaFileUpload {
    constructor() {
        this.id = guid();
        this.name = guid();
        this.title = 'Drag and drop files here to upload';
        this.fileTypesText = 'Maximum file size allowed is 2MB, supported file formats include .jpg, .png, and .pdf.';
        this.actionName = 'Browse Files';
        this.disabled = false;
        this.files = [];
        this.dragState = false;
        this.handleFileSelection = (event) => {
            const input = event.target;
            this.onChange && this.onChange(event);
            const selectedFiles = input.files;
            if (selectedFiles) {
                if (this.maximumFilesSize) {
                    const isFileOverSize = Array.from(selectedFiles).some(file => {
                        return file.size > this.maximumFilesSize;
                    });
                    if (isFileOverSize) {
                        this.uploadFileOverSize && this.uploadFileOverSize();
                        return;
                    }
                }
                const fileItems = Array.from(selectedFiles).map(file => ({
                    name: file.name,
                    uploadStatus: 'pending', // initial status
                }));
                this.files = [...this.files, ...fileItems];
                this.getUploadedFile && this.getUploadedFile([...this.files]);
            }
        };
        this.handleDrop = (event) => {
            event.preventDefault();
            event.stopPropagation();
            const droppedFiles = event.dataTransfer.files; // Accessing the dropped files
            if (droppedFiles) {
                const fileItems = Array.from(droppedFiles).map(file => ({
                    name: file.name,
                    uploadStatus: 'pending',
                }));
                this.files = [...this.files, ...fileItems]; // Update state with new files
            }
            this.dragState = false;
        };
        this.addDragOverClass = (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.dragState = true;
        };
        this.removeDragOverClass = (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.dragState = false;
        };
    }
    componentDidLoad() {
        const dropArea = document.querySelector('.file-upload__drop-area');
        dropArea.addEventListener('dragover', this.addDragOverClass);
        dropArea.addEventListener('dragleave', this.removeDragOverClass);
        dropArea.addEventListener('drop', this.handleDrop);
    }
    disconnectedCallback() {
        const dropArea = document.querySelector('.file-upload__drop-area');
        dropArea.removeEventListener('dragover', this.addDragOverClass);
        dropArea.removeEventListener('dragleave', this.removeDragOverClass);
        dropArea.removeEventListener('drop', this.handleDrop);
    }
    handleDeleteFile(index, file) {
        this.files = [...this.files.slice(0, index), ...this.files.slice(index + 1)];
        this.emitDeleteFile && this.emitDeleteFile(file, index);
    }
    renderFile(file, index) {
        if (file.uploadStatus === 'error') {
            return (h("div", { class: "file-upload__file-item--error" }, h("div", { class: "file-upload__file-item" }, h("span", { class: "file-upload__file-status file-upload__file-status--error" }, h("i", { class: "hgi-solid hgi-alert-circle", style: { fontSize: "20px" } })), h("span", { class: "file-upload__file-name" }, file.name), h("button", { class: "btn btn--close btn--icon btn--sm", onClick: () => this.handleDeleteFile(index, file) }, h("span", { class: "btn-icon" }, h("i", { class: "hgi-stroke hgi-multiplication-sign", style: { fontSize: "20px" } })))), h("div", { class: "file-upload__file-item-msg" }, file.errorMessage ? file.errorMessage : 'Here goes the helper text.')));
        }
        return (h("div", { class: "file-upload__file-item" }, h("span", { class: `file-upload__file-status file-upload__file-status--${file.uploadStatus}` }, file.uploadStatus === 'uploading' && file.progress && h("dga-loading", { size: "tiny", variant: "neutral" }), file.uploadStatus === 'complete' && h("i", { class: 'hgi-solid hgi-checkmark-circle-02' })), h("span", { class: "file-upload__file-name" }, file.name), h("button", { class: "btn btn--close btn--icon btn--sm", onClick: () => this.handleDeleteFile(index, file) }, h("span", { class: "btn-icon" }, h("i", { class: "hgi-stroke hgi-multiplication-sign", style: { fontSize: "20px" } })))));
    }
    render() {
        return (h("div", { key: 'e0ef06b84f9294f709cc0969de93b0f2c33bdeed', class: `file-upload ${this.dragState ? 'file-upload--drag-over' : ''} ${this.disabled ? 'file-upload--disabled' : ''}` }, h("input", { key: '2b70dd794e175d02ea878f49ce526c8e4db33e0f', type: "file", id: this.id, name: this.name, class: "file-upload__input", accept: this.accept, multiple: this.multiple, "aria-hidden": "true", onChange: this.handleFileSelection, ref: el => (this.fileInputRef = el) }), h("label", { key: '92645037560fce342ceada1648f08ef88197b994', htmlFor: this.id, class: "file-upload__drop-area" }, h("span", { key: 'b8283aa585148e68b4bb7433c6d067ad8bd51fcb', class: "file-upload__icon" }, h("i", { key: 'fa91ed1e525fc6b77a33bda27efa5fe3b9aaf004', class: "hgi-stroke hgi-file-upload", style: { fontSize: "20px" } })), h("div", { key: '45dd431889f3340dba39cfe16d72291fa16c822e', class: "file-upload__content" }, h("p", { key: '055e89960cb9c6421575f04e4dd4ef196ea9bb7d', class: "file-upload__instructions" }, this.title), h("p", { key: '67a69a7086c5f40bd7bc85e719048b58f71de1ea', class: "file-upload__formats" }, this.fileTypesText)), h("button", { key: 'ae870148681ed5214034717fde43f04f1f2ac63a', class: "btn btn--md btn--secondary", "aria-label": "Browse Files", disabled: this.dragState || this.disabled, type: "button", onClick: () => { var _a; return (_a = this.fileInputRef) === null || _a === void 0 ? void 0 : _a.click(); } }, h("span", { key: '0b4ea84eb8ca2e85ca2df015801c8bbcb9de2d49' }, this.actionName))), h("div", { key: '4d5a171409a646723e605fd0261d9fc42fa549d1', class: "file-upload__files-list" }, this.files.map((file, index) => this.renderFile(file, index)))));
    }
    static get is() { return "dga-file-upload"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-file-upload.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-file-upload.css"]
        };
    }
    static get properties() {
        return {
            "id": {
                "type": "string",
                "attribute": "id",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "guid()"
            },
            "name": {
                "type": "string",
                "attribute": "name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "guid()"
            },
            "accept": {
                "type": "string",
                "attribute": "accept",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "multiple": {
                "type": "boolean",
                "attribute": "multiple",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "title": {
                "type": "string",
                "attribute": "title",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Drag and drop files here to upload'"
            },
            "fileTypesText": {
                "type": "string",
                "attribute": "file-types-text",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Maximum file size allowed is 2MB, supported file formats include .jpg, .png, and .pdf.'"
            },
            "actionName": {
                "type": "string",
                "attribute": "action-name",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Browse Files'"
            },
            "maximumFilesSize": {
                "type": "number",
                "attribute": "maximum-files-size",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "attribute": "disabled",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            },
            "getUploadedFile": {
                "type": "unknown",
                "attribute": "get-uploaded-file",
                "mutable": false,
                "complexType": {
                    "original": "(\n    files: {\n      name: string;\n      uploadStatus: 'pending' | 'uploading' | 'complete' | 'error';\n      progress?: number; // from 0 to 100, if uploading\n      errorMessage?: string;\n    }[],\n  ) => void",
                    "resolved": "(files: { name: string; uploadStatus: \"error\" | \"pending\" | \"uploading\" | \"complete\"; progress?: number; errorMessage?: string; }[]) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "uploadFileOverSize": {
                "type": "unknown",
                "attribute": "upload-file-over-size",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onChange": {
                "type": "unknown",
                "attribute": "on-change",
                "mutable": false,
                "complexType": {
                    "original": "(event: Event) => void",
                    "resolved": "(event: Event) => void",
                    "references": {
                        "Event": {
                            "location": "global",
                            "id": "global::Event"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "emitDeleteFile": {
                "type": "unknown",
                "attribute": "emit-delete-file",
                "mutable": false,
                "complexType": {
                    "original": "(\n    file: {\n      name: string;\n      uploadStatus: 'pending' | 'uploading' | 'complete' | 'error';\n      progress?: number; // from 0 to 100, if uploading\n      errorMessage?: string;\n    },\n    index: number,\n  ) => void",
                    "resolved": "(file: { name: string; uploadStatus: \"error\" | \"pending\" | \"uploading\" | \"complete\"; progress?: number; errorMessage?: string; }, index: number) => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            }
        };
    }
    static get states() {
        return {
            "files": {},
            "dragState": {}
        };
    }
}
