"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FileDownloadFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importDefault(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const StyledButton_1 = require("../../../CommonUI/BuildlingBlocks/StyledButton");
const UIHorizontalSplit_1 = require("../../../CommonUI/BuildlingBlocks/UIHorizontalSplit");
const PropertyEditorBoolean_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorBoolean");
const CommonStyled_1 = require("./CommonStyled");
const PropertyEditorInteger_1 = require("../../../CommonUI/PropertyEditing/PropertyEditorInteger");
const FileFormControl_1 = require("../FileFormControl");
const CloudUploadIcon_1 = require("../../../CommonUI/Icon/CloudUploadIcon");
const DownloadIcon_1 = require("../../../CommonUI/Icon/DownloadIcon");
const FileUploadLayer_1 = require("../../../CommonUI/BuilderUI/FileUploadLayer");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
class XFileDownloadEditUI extends react_1.default.Component {
    render() {
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showFileName", updateCallback: this.props.editMe.controlUpdate, label: "Show File Name" }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showFileSize", updateCallback: this.props.editMe.controlUpdate, label: "Show File Size" }), (0, jsx_runtime_1.jsx)(PropertyEditorBoolean_1.PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showPreview", updateCallback: this.props.editMe.controlUpdate, label: "Show Preview" }), (0, jsx_runtime_1.jsx)(PropertyEditorInteger_1.PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "filesLimit", updateCallback: this.props.editMe.controlUpdate, label: "Files Limit" })] }));
    }
}
class FileDownloadFormControl extends FileFormControl_1.FileFormControl {
    __type = "File Download";
    download = (file) => {
        const element = document.createElement("a");
        element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(file.data));
        element.setAttribute("download", file.file.name);
        element.style.display = "none";
        document.body.appendChild(element);
        element.click();
        document.body.removeChild(element);
    };
    downloadAll = () => {
        const files = this.getFileObjects();
        for (let file of files) {
            this.download(file);
        }
    };
    render() {
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        const files = this.getFileObjects();
        return ((0, jsx_runtime_1.jsxs)(DownloadControlRender, { className: "DownloadControl-root", children: [this.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsx)("div", { className: "DownloadControl-title", children: "Download your files:" }), (0, jsx_runtime_1.jsxs)("div", { className: "DownloadControl-upload", children: [(0, jsx_runtime_1.jsx)("div", { className: "DownloadControl-placeholderText", children: files.length === 0 ? "You have no files." : "" }), (0, jsx_runtime_1.jsxs)(UploadButton, { onClick: this.openLayer, "data-testid": "btn-xFileUpload-upload", children: [(0, jsx_runtime_1.jsx)(CloudUploadIcon_1.CloudUploadIcon, {}), " Upload"] })] }), files.length > 0 && ((0, jsx_runtime_1.jsx)(FilePriviewList, { children: files.map((f, idx) => ((0, jsx_runtime_1.jsx)(FileUploadLayer_1.FilePreview, { file: f, showPreview: this.showPreview, showFileName: this.showFileName, showFileSize: this.showFileSize, index: idx, onDelete: this.deleteFile, showDownload: true, onUpdate: this.updateFile }, idx))) })), (0, jsx_runtime_1.jsx)(UIHorizontalSplit_1.UIHorizontalSplit, { marginTop: files.length === 0 ? 15 : 18, marginBottom: 20, background: "rgba(39, 41, 50, 0.2)" }), (0, jsx_runtime_1.jsx)("div", { className: "DownloadControl-bottomLine", children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", startIcon: (0, jsx_runtime_1.jsx)(DownloadIcon_1.DownloadIcon, {}), style: { marginBottom: "30px" }, onClick: this.downloadAll, "data-testid": "btn-xFileDownload-downloadall", disabled: files.length === 0, ref: this.ref, children: "Download All" }) }), this.renderLayerContent(), issueText && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), children: issueText ? issueText : "" }))] }));
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XFileDownloadEditUI, { editMe: this });
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type");
    }
    updateFile = (file, index) => {
        if (this.valueName) {
            let oldfiles = this.getFileObjects();
            oldfiles.splice(index, 1, file);
            this.setFormDataValue(this.valueName, oldfiles);
        }
    };
}
exports.FileDownloadFormControl = FileDownloadFormControl;
const DownloadControlRender = styled_components_1.default.div `
    position: relative;

    display: flex;
    flex-direction: column;

    .DownloadControl-title {
        font-style: normal;
        font-weight: normal;
        font-size: 14px;
        line-height: 140%;
        /* identical to box height, or 20px */
        /* main / black */

        color: #272932;

        margin-bottom: 20px;
    }

    .DownloadControl-upload {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .DownloadControl-placeholderText {
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 140%;
            /* identical to box height, or 17px */

            display: flex;
            align-items: center;

            /* main/text */

            color: #606881;
        }
    }

    .DownloadControl-bottomLine {
        display: flex;
        justify-content: center;
    }
`;
const UploadButton = styled_components_1.default.div `
    cursor: pointer;

    display: flex;
    align-items: center;

    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 140%;
    /* identical to box height, or 20px */

    text-align: right;

    /* main / black */

    color: #272932;
`;
const FilePriviewList = styled_components_1.default.div `
    background: rgba(64, 80, 166, 0.07);
    padding: 4px 12px;

    margin-top: 8px;
`;
//# sourceMappingURL=FileDownloadFormControl.js.map