import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React from "react";
import styled from "styled-components";
import { StyledButton } from "../../CommonUI/Components/Button";
import { HorizontalSplit } from "../../CommonUI/Components/HorizontalSplit";
import { PropertyEditorBoolean } from "../../CommonUI/PropertyEditing/PropertyEditorBoolean";
import { StyledFormHelperText, StyledInputLabel } from "./XCommonStyled";
import { PropertyEditorInteger } from "../../CommonUI/PropertyEditing/PropertyEditorInteger";
import { BaseFileControl } from "./BaseFileControl";
import { CloudUploadIcon } from "../../CommonUI/Icon/CloudUploadIcon";
import { DownloadIcon } from "../../CommonUI/Icon/DownloadIcon";
import { FilePreview } from "../../CommonUI/BuildUI/FileUploadLayer";
class XFileDownloadEditUI extends React.Component {
    render() {
        return (_jsxs(_Fragment, { children: [this.props.editMe.renderBaseDataControlEditor(), _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showFileName", updateCallback: this.props.editMe.controlUpdate, label: "Show File Name" }, void 0),
                _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showFileSize", updateCallback: this.props.editMe.controlUpdate, label: "Show File Size" }, void 0),
                _jsx(PropertyEditorBoolean, { editObject: this.props.editMe, propertyName: "showPreview", updateCallback: this.props.editMe.controlUpdate, label: "Show Preview" }, void 0),
                _jsx(PropertyEditorInteger, { editObject: this.props.editMe, propertyName: "filesLimit", updateCallback: this.props.editMe.controlUpdate, label: "Files Limit" }, void 0)] }, void 0));
    }
}
export class XFileDownload extends BaseFileControl {
    constructor() {
        super(...arguments);
        this.updateFile = (file, index) => {
            if (this.valueName) {
                let oldfiles = this.getFileObjects();
                oldfiles.splice(index, 1, file);
                this.setFormDataValue(this.valueName, oldfiles);
            }
        };
        this.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);
        };
        this.downloadAll = () => {
            const files = this.getFileObjects();
            for (let file of files) {
                this.download(file);
            }
        };
    }
    render() {
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || "";
        const files = this.getFileObjects();
        return (_jsxs(DownloadControlRender, Object.assign({ className: "DownloadControl-root" }, { children: [this.label && _jsx(StyledInputLabel, { children: this.label }, void 0),
                _jsx("div", Object.assign({ className: "DownloadControl-title" }, { children: "Download your files:" }), void 0),
                _jsxs("div", Object.assign({ className: "DownloadControl-upload" }, { children: [_jsx("div", Object.assign({ className: "DownloadControl-placeholderText" }, { children: files.length === 0 ? "You have no files." : "" }), void 0),
                        _jsxs(UploadButton, Object.assign({ onClick: this.openLayer, "data-testid": "btn-xFileUpload-upload" }, { children: [_jsx(CloudUploadIcon, {}, void 0), " Upload"] }), void 0)] }), void 0),
                files.length > 0 && (_jsx(FilePriviewList, { children: files.map((f, idx) => (_jsx(FilePreview, { file: f, showPreview: this.showPreview, showFileName: this.showFileName, showFileSize: this.showFileSize, index: idx, onDelete: this.deleteFile, showDownload: true, onUpdate: this.updateFile }, idx))) }, void 0)),
                _jsx(HorizontalSplit, { marginTop: files.length === 0 ? 15 : 18, marginBottom: 20, background: "rgba(39, 41, 50, 0.2)" }, void 0),
                _jsx("div", Object.assign({ className: "DownloadControl-bottomLine" }, { children: _jsx(StyledButton, Object.assign({ variant: "contained", color: "primary", startIcon: _jsx(DownloadIcon, {}, void 0), style: { marginBottom: "30px" }, onClick: this.downloadAll, "data-testid": "btn-xFileDownload-downloadall", disabled: files.length === 0, ref: this.ref }, { children: "Download All" }), void 0) }), void 0), this.renderLayerContent(), issueText && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText) }, { children: issueText ? issueText : "" }), void 0))] }), void 0));
    }
    renderEditUI() {
        return _jsx(XFileDownloadEditUI, { editMe: this }, void 0);
    }
}
const DownloadControlRender = styled.div `
    position: relative;

    display: flex;
    flex-direction: column;

    .DownloadControl-title {
        font-family: Inter;
        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-family: Inter;
            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.div `
    cursor: pointer;

    display: flex;
    align-items: center;

    font-family: Inter;
    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.div `
    background: rgba(64, 80, 166, 0.07);
    padding: 4px 12px;

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