"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileFormControl = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@material-ui/core");
const DataFormControl_1 = require("./DataFormControl");
const ObserveState_1 = require("../../CommonUI/StateManagement/ObserveState");
const StateManager_1 = require("@appglue/common/dist/Common/StateManager");
const UILayer_1 = require("../../CommonUI/BuildlingBlocks/UILayer");
const FileUploadLayer_1 = require("../../CommonUI/BuilderUI/FileUploadLayer");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class FileFormControl extends DataFormControl_1.DataFormControl {
    showFileName = true;
    showFileSize = true;
    showPreview = true;
    filesLimit = 3;
    showLayer = false;
    openLayer = (event) => {
        event.stopPropagation();
        this.showLayer = true;
        StateManager_1.StateManager.propertyChanged(this, "showLayer");
    };
    onClose = () => {
        this.showLayer = false;
        StateManager_1.StateManager.propertyChanged(this, "showLayer");
    };
    renderLayerContent() {
        const files = this.getFileObjects();
        return ((0, jsx_runtime_1.jsx)(ObserveState_1.ObserveState, { listenTo: this, properties: ["showLayer"], control: () => ((0, jsx_runtime_1.jsx)(UILayer_1.UILayer, { open: this.showLayer, showCloseButton: true, onClose: this.onClose, renderUI: () => ((0, jsx_runtime_1.jsx)(core_1.ClickAwayListener, { onClickAway: () => {
                        this.showLayer = false;
                        StateManager_1.StateManager.propertyChanged(this, "showLayer");
                    }, children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(FileUploadLayer_1.FileUploadLayer, { files: files, addFiles: this.addFiles, onDelete: this.deleteFile, showFileName: this.showFileName, showFileSize: this.showFileSize, showPreview: this.showPreview, filesLimit: this.filesLimit, onClose: this.onClose, title: "Upload Files:" }) }) })) })) }));
    }
    getDesignValidationIssues() {
        return [];
    }
    getRuntimeValidationIssues() {
        return [];
    }
    getAddedData() {
        return;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "showFileName", "showFileSize", "showPreview", "filesLimit", "showLayer");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "showFileName", "showFileSize", "showPreview", "filesLimit", "showLayer");
    }
    addFiles = (files) => {
        if (this.valueName) {
            let oldfiles = this.getFileObjects();
            this.setFormDataValue(this.valueName, [...files, ...oldfiles]);
        }
    };
    deleteFile = (_file, index) => {
        if (this.valueName) {
            let oldfiles = this.getFileObjects();
            oldfiles.splice(index, 1);
            this.setFormDataValue(this.valueName, oldfiles);
        }
    };
    getFileObjects = () => {
        return this.valueName ? this.getFormDataValue(this.valueName) || [] : [];
    };
}
exports.FileFormControl = FileFormControl;
//# sourceMappingURL=FileFormControl.js.map