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: '051bcf269618322dfeda75a8496d1a9ea05b95f7', class: `file-upload ${this.dragState ? 'file-upload--drag-over' : ''} ${this.disabled ? 'file-upload--disabled' : ''}` }, h("input", { key: '6d1e9e3a7ead8b3b02fce086ab141cb225ef435f', 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: '22c24cd61add29abee1f8eef162f0c4b8f2f5ffd', htmlFor: this.id, class: "file-upload__drop-area" }, h("span", { key: '332eb4f827ce8b7605bd5b51aedeee3ad595c1d8', class: "file-upload__icon" }, h("i", { key: '43b88b78705e654ac04108d9587aae28841c2008', class: "hgi-stroke hgi-file-upload", style: { fontSize: "20px" } })), h("div", { key: 'a17e14cb36b9b3ad2ee45e02ef30f63fffd89f7a', class: "file-upload__content" }, h("p", { key: 'de77d9ef4f3111a63a47c6ac68d67c0350ae3389', class: "file-upload__instructions" }, this.title), h("p", { key: '7cf9574cb6b8a460d2c9ccf2bfb79cd3008ee5e0', class: "file-upload__formats" }, this.fileTypesText)), h("button", { key: '76edb80962bcc27f2e1797d2ffd48d9d0eb0ab81', 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: '2a74f2821210531d8771e0abbe221eeb73014331' }, this.actionName))), h("div", { key: '8ac91f9054f15de37159e354f785b0e15fb17b57', 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",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "id",
                "reflect": false,
                "defaultValue": "guid()"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "name",
                "reflect": false,
                "defaultValue": "guid()"
            },
            "accept": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "accept",
                "reflect": false
            },
            "multiple": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "multiple",
                "reflect": false
            },
            "title": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "title",
                "reflect": false,
                "defaultValue": "'Drag and drop files here to upload'"
            },
            "fileTypesText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "file-types-text",
                "reflect": false,
                "defaultValue": "'Maximum file size allowed is 2MB, supported file formats include .jpg, .png, and .pdf.'"
            },
            "actionName": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "action-name",
                "reflect": false,
                "defaultValue": "'Browse Files'"
            },
            "maximumFilesSize": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "maximum-files-size",
                "reflect": false
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "disabled",
                "reflect": false,
                "defaultValue": "false"
            },
            "getUploadedFile": {
                "type": "unknown",
                "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",
                "mutable": false,
                "complexType": {
                    "original": "() => void",
                    "resolved": "() => void",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false
            },
            "onChange": {
                "type": "unknown",
                "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",
                "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": {}
        };
    }
}
//# sourceMappingURL=dga-file-upload.js.map
