"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditorFileList = exports.EditModeFileValueEditor = exports.DisplayModeFileValueEditor = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FileUploadLayer_1 = require("../BuilderUI/FileUploadLayer");
const FileData_1 = require("@appglue/common/dist/Common/FileData");
const StyledButton_1 = require("../BuildlingBlocks/StyledButton");
const UploadIcon_1 = require("../Icon/UploadIcon");
const ListFileValueRender = ({ values, length = 15 }) => {
    let requiredLength = false;
    let renderValue = values.reduce((s, current, index) => {
        if (index === 0)
            return `${current?.fileName || ""}`;
        if (`${s}, ${current}`.length > length) {
            requiredLength = true;
            return s;
        }
        if (current?.fileName) {
            s = `${s}, ${current?.fileName}`;
        }
        return s;
    }, "");
    if (renderValue === "") {
        return ((0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", startIcon: (0, jsx_runtime_1.jsx)(UploadIcon_1.UploadIcon, {}), "data-testid": "btn-xFileUpload-upload", size: "small", children: "Upload" }));
    }
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderValue, " ", requiredLength ? `... (${values.length})` : ``] }));
};
const DisplayModeFileValueEditor = ({ value }) => {
    if (Array.isArray(value)) {
        return ((0, jsx_runtime_1.jsx)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-File-Display", children: (0, jsx_runtime_1.jsx)(ListFileValueRender, { values: value }) }));
    }
    if (value) {
        return ((0, jsx_runtime_1.jsx)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-File-Display", children: `${value?.file?.name} [${value?.file?.size / 1000} kb]` || `${value?.fileName}` }));
    }
    return ((0, jsx_runtime_1.jsx)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-File-Display", children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", startIcon: (0, jsx_runtime_1.jsx)(UploadIcon_1.UploadIcon, {}), "data-testid": "btn-xFileUpload-upload", size: "small", children: "Upload" }) }));
};
exports.DisplayModeFileValueEditor = DisplayModeFileValueEditor;
exports.EditModeFileValueEditor = react_1.default.forwardRef(
// eslint-disable-next-line
({ value, forData, onUpdate }, ref) => {
    let values = forData.list
        ? Array.isArray(value)
            ? value
            : value
                ? [value]
                : []
        : Array.isArray(value)
            ? value[0]
            : value;
    const onValueUpdate = (newValues) => {
        onUpdate(newValues);
    };
    if (forData.list) {
        return (0, jsx_runtime_1.jsx)(exports.EditorFileList, { values: values, updateCallback: onValueUpdate });
    }
    const addFiles = (files) => {
        onUpdate(new FileData_1.FileData(files[0].file.name, files[0].data));
    };
    // eslint-disable-next-line
    const deleteFile = (_file, _index) => {
        onUpdate(undefined);
    };
    return ((0, jsx_runtime_1.jsx)("div", { className: "ValueEditor-display", "data-testid": "ValueEditor-File-Edit", children: (0, jsx_runtime_1.jsx)(FileUploadLayer_1.FileUploadLayer, { files: values ? [values] : [], addFiles: addFiles, onDelete: deleteFile, showFileName: true, showFileSize: true, showPreview: true, filesLimit: 1 }) }));
});
const EditorFileList = (props) => {
    const [values, setValues] = (0, react_1.useState)(props.values);
    (0, react_1.useEffect)(() => {
        setValues([...props.values]);
    }, [props.values, setValues]);
    const update = (vals) => {
        props.updateCallback(vals);
        setValues([...vals]);
    };
    const addFiles = (files) => {
        update([...values, ...files.map((f) => new FileData_1.FileData(f.file.name, f.data))]);
    };
    const deleteFile = (_file, index) => {
        values.splice(index, 1);
        update(values);
    };
    return ((0, jsx_runtime_1.jsx)(StyledFileList, { className: "PropertyList-Wrapper FileList-Wrapper", "data-testid": "ValueEditor-FileList-Edit", children: (0, jsx_runtime_1.jsx)(FileUploadLayer_1.FileUploadLayer, { files: values || [], addFiles: addFiles, onDelete: deleteFile, showFileName: true, showFileSize: true, showPreview: true, filesLimit: 100 }) }));
};
exports.EditorFileList = EditorFileList;
const StyledFileList = styled_components_1.default.div `
    width: 100%;

    text-align: right;

    .FileList {
        display: flex;
        flex-direction: column;

        > div {
            margin-top: 5px;

            &:first-child {
                margin-top: 0;
            }
        }

        .MuiSwitch-root {
            display: flex;
        }
    }

    .FileList-Label {
        color: #677c95;

        font-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

    .FileList-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
`;
//# sourceMappingURL=File.js.map