import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { FileUploadLayer } from "../BuildUI/FileUploadLayer";
import { StyledButton } from "../Components/Button";
import { UploadIcon } from "../Icon/UploadIcon";
const ListFileValueRender = ({ values, length = 15 }) => {
    let requiredLength = false;
    let renderValue = values.reduce((s, current, index) => {
        var _a;
        if (index === 0)
            return `${(current === null || current === void 0 ? void 0 : current.fileName) || ((_a = current === null || current === void 0 ? void 0 : current.file) === null || _a === void 0 ? void 0 : _a.name) || ""}`;
        if (`${s}, ${current}`.length > length) {
            requiredLength = true;
            return s;
        }
        if (current === null || current === void 0 ? void 0 : current.fileName) {
            s = `${s}, ${current === null || current === void 0 ? void 0 : current.fileName}`;
        }
        return s;
    }, "");
    if (renderValue === "") {
        return (_jsx(StyledButton, Object.assign({ variant: "contained", color: "primary", startIcon: _jsx(UploadIcon, {}, void 0), "data-testid": "btn-xFileUpload-upload", size: "small" }, { children: "Upload" }), void 0));
    }
    return (_jsxs(_Fragment, { children: [renderValue, " ", requiredLength ? `... (${values.length})` : ``] }, void 0));
};
export const DisplayModeFileValueEditor = ({ value }) => {
    var _a;
    return (_jsx("div", Object.assign({ className: "ValueEditor-display", "data-testid": "ValueEditor-File-Display" }, { children: Array.isArray(value) ? (_jsx(ListFileValueRender, { values: value }, void 0)) : value ? (((_a = value === null || value === void 0 ? void 0 : value.file) === null || _a === void 0 ? void 0 : _a.name) || (value === null || value === void 0 ? void 0 : value.fileName)) : (_jsx(StyledButton, Object.assign({ variant: "contained", color: "primary", startIcon: _jsx(UploadIcon, {}, void 0), "data-testid": "btn-xFileUpload-upload", size: "small" }, { children: "Upload" }), void 0)) }), void 0));
};
export const EditModeFileValueEditor = React.forwardRef(({ 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 _jsx(EditorFileList, { values: values, updateCallback: onValueUpdate }, void 0);
    }
    const addFiles = (files) => {
        onUpdate(files[0]);
    };
    const deleteFile = (_file, _index) => {
        onUpdate(undefined);
    };
    return (_jsx("div", Object.assign({ className: "ValueEditor-display", "data-testid": "ValueEditor-File-Edit" }, { children: _jsx(FileUploadLayer, { files: values ? [values] : [], addFiles: addFiles, onDelete: deleteFile, showFileName: true, showFileSize: true, showPreview: true, filesLimit: 1 }, void 0) }), void 0));
});
export const EditorFileList = (props) => {
    const [values, setValues] = useState(props.values);
    useEffect(() => {
        setValues([...props.values]);
    }, [props.values, setValues]);
    const update = (vals) => {
        props.updateCallback(vals);
        setValues([...vals]);
    };
    const addFiles = (files) => {
        update([...values, ...files]);
    };
    const deleteFile = (_file, index) => {
        values.splice(index, 1);
        update(values);
    };
    return (_jsx(StyledFileList, Object.assign({ className: "PropertyList-Wrapper FileList-Wrapper", "data-testid": "ValueEditor-FileList-Edit" }, { children: _jsx(FileUploadLayer, { files: values || [], addFiles: addFiles, onDelete: deleteFile, showFileName: true, showFileSize: true, showPreview: true, filesLimit: 100 }, void 0) }), void 0));
};
const StyledFileList = styled.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-family: Mulish;
        font-style: normal;
        font-weight: 600;
        margin-bottom: 5px;
    }

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