import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { DropzoneAreaBase } from "material-ui-dropzone";
import { StyledButton } from "../../CommonUI/Components/Button";
import { HorizontalSplit } from "../../CommonUI/Components/HorizontalSplit";
import { CloseRedIcon } from "../../CommonUI/Icon/CloseRedIcon";
import { PDFFileIcon } from "../../CommonUI/Icon/PDFFileIcon";
import { TextFileIcon } from "../../CommonUI/Icon/TextFileIcon";
import { TextIcon } from "../../CommonUI/TextIcon";
import { DownloadIcon } from "../../CommonUI/Icon/DownloadIcon";
import { DownloadBlueIcon } from "../../CommonUI/Icon/DownloadBlueIcon";
import { DragDropIcon } from "../../CommonUI/Icon/DragDropIcon";
import { DragDropBlueIcon } from "../../CommonUI/Icon/DragDropBlueIcon";
import styled from "styled-components";
import { InlineTextEdit } from "../InlineTextEdit";
export const FilePreview = (props) => {
    const { file, showPreview, showFileName, showFileSize, showDownload, index, onDelete, onUpdate } = props;
    let icon;
    const [fileName, setFileName] = useState(file.file.name);
    if (file.file.type.startsWith("image/")) {
        icon = _jsx("img", { className: "XFileUpload-PreviewImage", src: file.data, alt: file.file.name }, void 0);
    }
    else if (file.file.type === "application/pdf") {
        icon = _jsx(PDFFileIcon, {}, void 0);
    }
    else if (file.file.type.startsWith("text/")) {
        icon = _jsx(TextFileIcon, {}, void 0);
    }
    else {
        icon = _jsx(TextIcon, { name: "U" }, void 0);
    }
    return (_jsxs(_Fragment, { children: [index > 0 && _jsx(HorizontalSplit, { background: "#fff", marginTop: 0, marginBottom: 0 }, void 0),
            _jsxs(FilePreviewWrapper, { children: [showPreview && _jsx(FilePreviewIcon, { children: icon }, void 0),
                    showFileName && (_jsx(FilePreviewFileName, { children: _jsx(InlineTextEdit, { text: fileName, onEdit: (newValue) => {
                                setFileName(newValue);
                                if (onUpdate) {
                                    onUpdate(Object.assign(Object.assign({}, file), { file: Object.assign(Object.assign({}, file.file), { name: newValue, type: file.file.type, size: file.file.size }) }), index);
                                }
                            } }, void 0) }, void 0)),
                    showFileSize && _jsxs(FilePreviewFileSize, { children: [file.file.size / 1000, " kb"] }, void 0),
                    showDownload && (_jsx(IconButton, Object.assign({ href: `data:${file.file.type};charset=UTF-8,${encodeURIComponent(file.data)}`, download: `${fileName}`, rel: "noopener noreferrer" }, { children: _jsx(DownloadBlueIcon, {}, void 0) }), void 0)),
                    _jsx(IconButton, Object.assign({ onClick: () => onDelete(file, index) }, { children: _jsx(CloseRedIcon, {}, void 0) }), void 0)] }, void 0)] }, void 0));
};
export 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) => {
                var _a;
                file = {
                    file: f,
                    data: (_a = event.target) === null || _a === void 0 ? void 0 : _a.result,
                };
                addFiles([file]);
            };
            reader.readAsDataURL(f);
        }
    };
    return (_jsxs(FileControlLayer, Object.assign({ "data-testid": "fileupload-layer", onPaste: onPaste }, { children: [title && _jsx("div", Object.assign({ className: "FileUpload-layerTitle" }, { children: title }), void 0),
            _jsxs(DragDropContainer, { children: [files.length === 0 ? (_jsxs(DropzoneAreaEmptyPlaceholder, { children: [_jsx("div", Object.assign({ className: "FileUpload-layerPlaceHolderIcon" }, { children: _jsx(DragDropIcon, {}, void 0) }), void 0),
                            _jsx("div", Object.assign({ className: "FileUpload-layerPlaceHolderText" }, { children: "Drag & drop file here" }), void 0),
                            _jsx("div", Object.assign({ className: "FileUpload-layerPlaceHolderOr" }, { children: "or" }), void 0),
                            _jsx(StyledButton, Object.assign({ variant: "contained", color: "primary" }, { children: "Browse Files" }), void 0),
                            _jsx("div", Object.assign({ className: "FileUpload-layerPlaceHolderHint" }, { children: "Also you can paste file or file name" }), void 0)] }, void 0)) : (_jsxs(DropzoneAreaPlaceholder, { children: [_jsxs("div", Object.assign({ className: "FileUpload-layerPlaceHolderText" }, { children: [_jsx("div", Object.assign({ className: "FileUpload-layerPlaceHolderIcon" }, { children: _jsx(DragDropBlueIcon, {}, void 0) }), void 0), "Drag & drop file here"] }), void 0),
                            _jsx(StyledButton, Object.assign({ variant: "contained", color: "primary" }, { children: "Browse Files" }), void 0),
                            _jsx("div", Object.assign({ className: "FileUpload-layerPlaceHolderHint" }, { children: "Also you can paste file or file name" }), void 0)] }, void 0)),
                    _jsx(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: () => _jsx(_Fragment, {}, void 0), showAlerts: false }, void 0),
                    files.length > 0 && (_jsx(FilePriviewList, { children: files.map((f, idx) => (_jsx(FilePreview, { file: f, showPreview: showPreview, showFileName: showFileName, showFileSize: showFileSize, index: idx, onDelete: onDelete, showDownload: showDownload }, idx))) }, void 0))] }, void 0),
            onClose && (_jsxs(_Fragment, { children: [_jsx(HorizontalSplit, { marginTop: 18, marginBottom: 20, background: "rgba(39, 41, 50, 0.2)" }, void 0),
                    _jsx("div", Object.assign({ className: "FileUpload-layerBottom" }, { children: _jsx(StyledButton, Object.assign({ variant: "contained", color: "primary", startIcon: _jsx(DownloadIcon, {}, void 0), onClick: onClose, disabled: files.length === 0 }, { children: "Done" }), void 0) }), void 0)] }, void 0))] }), void 0));
};
const FilePriviewList = styled.div `
    background: rgba(64, 80, 166, 0.07);
    padding: 4px 12px;
`;
const FilePreviewWrapper = styled.div `
    display: flex;
    width: 100%;
    align-items: center;
    padding: 8px 4px;
    justify-content: space-between;
`;
const FilePreviewFileName = styled.div `
    font-family: Inter;
    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.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 #ee3e54;
    }
`;
const FilePreviewFileSize = styled.div `
    min-width: 100px;

    text-align: right;

    font-family: Inter;
    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.div `
    width: 26px;
    margin-right: 10px;

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

    overflow: hidden;

    .XFileUpload-PreviewImage {
        height: 22px;
    }
`;
const FileControlLayer = styled.div `
    .FileUpload-layerTitle {
        font-family: Inter;
        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.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-family: Inter;
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 140%;
        text-align: center;

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

    .FileUpload-layerPlaceHolderOr {
        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 / black */

        color: #272932;

        opacity: 0.4;

        margin-bottom: 8px;
    }

    .FileUpload-layerPlaceHolderHint {
        font-family: Inter;
        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.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-family: Inter;
        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-family: Inter;
        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;
    }
`;
export const DragDropContainer = styled.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