"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DragDropContainer = exports.FileUploadLayer = exports.FilePreview = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const material_ui_dropzone_1 = require("material-ui-dropzone");
const StyledButton_1 = require("../BuildlingBlocks/StyledButton");
const UIHorizontalSplit_1 = require("../BuildlingBlocks/UIHorizontalSplit");
const CloseRedIcon_1 = require("../../CommonUI/Icon/CloseRedIcon");
const PDFFileIcon_1 = require("../../CommonUI/Icon/PDFFileIcon");
const TextFileIcon_1 = require("../../CommonUI/Icon/TextFileIcon");
const TextIcon_1 = require("../../CommonUI/TextIcon");
const DownloadIcon_1 = require("../../CommonUI/Icon/DownloadIcon");
const DownloadBlueIcon_1 = require("../../CommonUI/Icon/DownloadBlueIcon");
const DragDropIcon_1 = require("../../CommonUI/Icon/DragDropIcon");
const DragDropBlueIcon_1 = require("../../CommonUI/Icon/DragDropBlueIcon");
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const InlineTextEdit_1 = require("../InlineTextEdit");
const UIStyleConstants_1 = require("@appglue/common/dist/Common/UIStyleConstants");
const FilePreview = (props) => {
    const { file, showPreview, showFileName, showFileSize, showDownload, index, onDelete, onUpdate } = props;
    let icon;
    const [fileName, setFileName] = (0, react_1.useState)(file.file.name);
    if (file.file.type.startsWith("image/")) {
        icon = (0, jsx_runtime_1.jsx)("img", { className: "XFileUpload-PreviewImage", src: file.data, alt: file.file.name });
    }
    else if (file.file.type === "application/pdf") {
        icon = (0, jsx_runtime_1.jsx)(PDFFileIcon_1.PDFFileIcon, {});
    }
    else if (file.file.type.startsWith("text/")) {
        icon = (0, jsx_runtime_1.jsx)(TextFileIcon_1.TextFileIcon, {});
    }
    else {
        icon = (0, jsx_runtime_1.jsx)(TextIcon_1.TextIcon, { name: "U" });
    }
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [index > 0 && ((0, jsx_runtime_1.jsx)(UIHorizontalSplit_1.UIHorizontalSplit, { background: UIStyleConstants_1.UIStyleConstants.WHITE_COLOR, marginTop: 0, marginBottom: 0 })), (0, jsx_runtime_1.jsxs)(FilePreviewWrapper, { children: [showPreview && (0, jsx_runtime_1.jsx)(FilePreviewIcon, { children: icon }), showFileName && ((0, jsx_runtime_1.jsx)(FilePreviewFileName, { children: (0, jsx_runtime_1.jsx)(InlineTextEdit_1.InlineTextEdit, { text: fileName, onEdit: (newValue) => {
                                setFileName(newValue);
                                if (onUpdate) {
                                    onUpdate({
                                        ...file,
                                        file: {
                                            ...file.file,
                                            name: newValue,
                                            type: file.file.type,
                                            size: file.file.size,
                                        },
                                    }, index);
                                }
                            } }) })), showFileSize && (0, jsx_runtime_1.jsxs)(FilePreviewFileSize, { children: [file.file.size / 1000, " kb"] }), showDownload && ((0, jsx_runtime_1.jsx)(IconButton, { href: `data:${file.file.type};charset=UTF-8,${encodeURIComponent(file.data)}`, download: `${fileName}`, rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsx)(DownloadBlueIcon_1.DownloadBlueIcon, {}) })), (0, jsx_runtime_1.jsx)(IconButton, { onClick: () => onDelete(file, index), children: (0, jsx_runtime_1.jsx)(CloseRedIcon_1.CloseRedIcon, {}) })] })] }));
};
exports.FilePreview = FilePreview;
const FileUploadLayer = ({ files, addFiles, onClose, filesLimit, showPreview, showDownload, showFileName, showFileSize, onDelete, title, }) => {
    const onPaste = (event) => {
        if (event.clipboardData.files.length) {
            let file = {};
            const f = event.clipboardData.files[0];
            const reader = new FileReader();
            reader.onload = (event) => {
                file = {
                    file: f,
                    data: event.target?.result,
                };
                addFiles([file]);
            };
            reader.readAsDataURL(f);
        }
    };
    return ((0, jsx_runtime_1.jsxs)(FileControlLayer, { "data-testid": "fileupload-layer", onPaste: onPaste, children: [title && (0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerTitle", children: title }), (0, jsx_runtime_1.jsxs)(exports.DragDropContainer, { children: [files.length === 0 ? ((0, jsx_runtime_1.jsxs)(DropzoneAreaEmptyPlaceholder, { children: [(0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerPlaceHolderIcon", children: (0, jsx_runtime_1.jsx)(DragDropIcon_1.DragDropIcon, {}) }), (0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerPlaceHolderText", children: "Drag & drop file here" }), (0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerPlaceHolderOr", children: "or" }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", children: "Browse Files" }), (0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerPlaceHolderHint", children: "Also you can paste file or file name" })] })) : ((0, jsx_runtime_1.jsxs)(DropzoneAreaPlaceholder, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "FileUpload-layerPlaceHolderText", children: [(0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerPlaceHolderIcon", children: (0, jsx_runtime_1.jsx)(DragDropBlueIcon_1.DragDropBlueIcon, {}) }), "Drag & drop file here"] }), (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", children: "Browse Files" }), (0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerPlaceHolderHint", children: "Also you can paste file or file name" })] })), (0, jsx_runtime_1.jsx)(material_ui_dropzone_1.DropzoneAreaBase, { fileObjects: files, dropzoneText: "", onAdd: addFiles, dropzoneClass: files.length === 0 ? "XFileUpload-root" : "XFileUpload-preview-root", showFileNames: false, showPreviewsInDropzone: false, filesLimit: filesLimit, 
                        // disable for other files
                        getPreviewIcon: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), showAlerts: false }), files.length > 0 && ((0, jsx_runtime_1.jsx)(FilePriviewList, { children: files.map((f, idx) => ((0, jsx_runtime_1.jsx)(exports.FilePreview, { file: f, showPreview: showPreview, showFileName: showFileName, showFileSize: showFileSize, index: idx, onDelete: onDelete, showDownload: showDownload }, idx))) }))] }), onClose && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(UIHorizontalSplit_1.UIHorizontalSplit, { marginTop: 18, marginBottom: 20, background: "rgba(39, 41, 50, 0.2)" }), (0, jsx_runtime_1.jsx)("div", { className: "FileUpload-layerBottom", children: (0, jsx_runtime_1.jsx)(StyledButton_1.StyledButton, { variant: "contained", color: "primary", startIcon: (0, jsx_runtime_1.jsx)(DownloadIcon_1.DownloadIcon, {}), onClick: onClose, disabled: files.length === 0, children: "Done" }) })] }))] }));
};
exports.FileUploadLayer = FileUploadLayer;
const FilePriviewList = styled_components_1.default.div `
    background: rgba(64, 80, 166, 0.07);
    padding: 4px 12px;
`;
const FilePreviewWrapper = styled_components_1.default.div `
    display: flex;
    width: 100%;
    align-items: center;
    padding: 8px 4px;
    justify-content: space-between;
`;
const FilePreviewFileName = styled_components_1.default.div `
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: 0px;
    text-align: left;
    color: #272932;

    flex: 1;

    .InlineEdit.InlineEdit-input {
        .MuiInputBase-input {
            background: rgba(64, 80, 166, 0.05) !important;
            border: none !important;
            border-bottom: solid 1px rgba(39, 41, 50, 0.35) !important;

            font-family: Inter !important;
            font-style: normal !important;
            font-weight: normal !important;
            font-size: 12px !important;
            line-height: 140% !important;

            /* main / black */

            color: #272932 !important;
        }
    }
`;
const IconButton = styled_components_1.default.a `
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    margin-left: auto;

    border: 1px solid transparent;
    cursor: pointer;

    &:hover {
        border: 1px solid ${UIStyleConstants_1.UIStyleConstants.RED_COLOR};
    }
`;
const FilePreviewFileSize = styled_components_1.default.div `
    min-width: 100px;

    text-align: right;

    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 0em;
    color: rgba(39, 41, 50, 0.3);
`;
const FilePreviewIcon = styled_components_1.default.div `
    width: 26px;
    margin-right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    .XFileUpload-PreviewImage {
        height: 22px;
    }
`;
const FileControlLayer = styled_components_1.default.div `
    .FileUpload-layerTitle {
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 140%;
        /* or 22px */

        text-align: center;

        color: #272932;

        margin-bottom: 16px;
    }

    .FileUpload-layerBottom {
        text-align: center;
    }
`;
const DropzoneAreaEmptyPlaceholder = styled_components_1.default.div `
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfcfe;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .FileUpload-layerPlaceHolderIcon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(64, 80, 166, 0.2);
        margin-bottom: 16px;
    }

    .FileUpload-layerPlaceHolderText {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 140%;
        text-align: center;

        color: #4050a6;
        margin-bottom: 4px;
    }

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

        display: flex;
        align-items: center;

        /* main / black */

        color: #272932;

        opacity: 0.4;

        margin-bottom: 8px;
    }

    .FileUpload-layerPlaceHolderHint {
        font-style: normal;
        font-weight: 500;
        font-size: 8px;
        line-height: 140%;
        /* or 11px */

        text-align: center;
        letter-spacing: 0.1px;

        /* main / blue */

        color: #4050a6;
        margin-top: 12px;
    }
`;
const DropzoneAreaPlaceholder = styled_components_1.default.div `
    background: #fcfcfe;

    flex: 1;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .FileUpload-layerPlaceHolderIcon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 4px;
    }

    .FileUpload-layerPlaceHolderText {
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 140%;
        text-align: center;

        color: #4050a6;
        margin-bottom: 8px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .FileUpload-layerPlaceHolderHint {
        font-style: normal;
        font-weight: 500;
        font-size: 8px;
        line-height: 140%;
        /* or 11px */

        text-align: center;
        letter-spacing: 0.1px;

        /* main / blue */

        color: #4050a6;
        margin-top: 8px;
        margin-bottom: 16px;
    }
`;
exports.DragDropContainer = styled_components_1.default.div `
  background: #fcfcfe;
  position: relative;

  border: 1px dashed #4050a6;
  border-radius: 4px;

  min-width: 360px;
  min-height: 253px;

  padding: 4px;

  display: flex;
  flex-direction: column;

  .XFileUpload-root {
    flex: 1;

    display: flex;
    flex-direction: column;

    border: none;
    styled
    justify-content: center;
    background: transparent;

    .MuiDropzoneArea-textContainer {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: center;

      border: 1px solid rgba(39, 41, 50, 0.2);
      box-sizing: border-box;
      border-radius: 4px;

      .MuiDropzoneArea-icon {
        height: 16px;
        width: 16px;
        display: none;
      }

      .MuiDropzoneArea-text {
        display: none;
      }
    }
  }

  .XFileUpload-preview-root {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    border: 1px dashed #4050a6;
    border-radius: 4px;
    min-height: 0;
    opacity: 0;
  }
`;
//# sourceMappingURL=FileUploadLayer.js.map