import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { useEvaluate } from "../hooks/useExpression";
import { registerComponent } from "../interfaces";
import { Box, Text, Icon, Flex, Image, FormLabel, FormControl, Grid, AspectRatio, IconButton, ButtonGroup, useMediaQuery, } from "@chakra-ui/react";
import { RuntimeContext } from "../RuntimeContext";
import { useSource } from "../hooks/useSource";
import Carousel, { Alignment, ScrollMode } from "nuka-carousel";
import { fallbackImg } from "../utils/fallbackImage";
import { FileBlank, Movie, Upload, ArrowLeftAlt, ArrowRightAlt, } from "@feedloop/icon";
import iconsList from "../components/iconsList";
const layoutOptions = [
    { icon: "GridAlt", value: "Grid" },
    { icon: "ListAlt", value: "List" },
    { icon: "Carousel", value: "Carousel" },
    { icon: "Flex", value: "Masonry" },
];
const FileGallery = registerComponent("File Gallery", {
    type: "none",
    icon: "MultipleFiles",
    group: "media",
    display: "block",
    defaultProps: {
        title: "Multiple File",
        showFileTitle: true,
        showFileSize: true,
        unable: true,
        layout: "Grid",
        data: {
            inputID: "__FileGalleryInput__",
            type: "custom",
            field: { type: "string", options: { format: "text" } },
            validation: {
                required: false,
            },
        },
    },
    propDefinition: {
        title: {
            group: "Design",
            type: "expression",
            options: {},
        },
        showFileTitle: {
            group: "Design",
            type: "boolean",
            options: {
                style: "full-width",
                format: "boolean",
            },
        },
        showFileSize: {
            group: "Design",
            type: "boolean",
            options: {
                style: "full-width",
                format: "boolean",
            },
        },
        unable: {
            label: "Disable Change Layout",
            group: "Design",
            type: "boolean",
            options: {
                style: "full-width",
                format: "boolean",
            },
        },
        layout: {
            group: "Design",
            type: "string",
            options: {
                format: "button",
                options: layoutOptions,
            },
            hideOrShownOn: {
                type: "hideOn",
                expression: {
                    type: "formula",
                    formula: "unable != true",
                },
            },
        },
        data: {
            group: "Design",
            type: "state",
            options: {
                inputID: "__FileGalleryInput__",
                type: "custom",
                field: { type: "string", options: { format: "text" } },
            },
        },
    },
    Component: (props) => {
        var _a, _b, _c, _d, _e;
        const [mediumScreen] = useMediaQuery("(min-width: 48rem)");
        const [largeScreen] = useMediaQuery("(min-width: 84rem)");
        const screen = React.useMemo(() => {
            if (largeScreen)
                return "large";
            else if (mediumScreen)
                return "medium";
            else
                return "small";
        }, [mediumScreen, largeScreen]);
        const componentTitle = useEvaluate(props.properties.title);
        const fileSize = React.useMemo(() => props.properties.showFileSize, [props.properties.showFileSize]);
        const fileTitle = React.useMemo(() => props.properties.showFileTitle, [props.properties.showFileTitle]);
        const disableChangeLayout = React.useMemo(() => props.properties.unable, [props.properties.unable]);
        const [layoutState, setLayoutState] = React.useState({ value: "Grid" });
        const currentlayout = React.useMemo(() => (disableChangeLayout ? props.properties.layout : layoutState.value), [disableChangeLayout, layoutState, props.properties.layout]);
        const source = useSource();
        const tables = RuntimeContext.useSelectState((state) => state.schema.tables);
        const views = RuntimeContext.useSelectState((state) => state.schema.views);
        const tableName = React.useMemo(() => {
            var _a, _b;
            return ((_a = tables.find((t) => t.name === source.target)) === null || _a === void 0 ? void 0 : _a.name) ||
                ((_b = views.find((v) => v.name === source.target)) === null || _b === void 0 ? void 0 : _b.query.table);
        }, [tables, views, source.target]);
        const column = React.useMemo(() => props.properties.data.inputID, [props.properties.data]);
        const files = React.useMemo(() => props.data.page.row[column], [props.data.page.row]);
        const getFileURL = React.useCallback((filename) => {
            return `${props.app.config.endpoint}/v1/files/public/${tableName}/${props.data.page.row.id}/${column}/${filename}`;
        }, [props.app.config.endpoint, props.data.page.row.id, column, tableName]);
        const [currentFileIndex, setCurrentFileIndex] = React.useState(0);
        const carouselImage = (filename, filesize) => {
            const fileUrl = getFileURL(filename);
            return (_jsxs(Box, Object.assign({ position: "relative", display: "flex", flexDirection: "column", width: screen === "large"
                    ? "1088px"
                    : screen === "medium"
                        ? "454px"
                        : "280px", height: screen === "large"
                    ? "342px"
                    : screen === "medium"
                        ? "255px"
                        : "246px" }, { children: [screen === "large" && (_jsx(Image, { width: "100%", height: "100%", src: fileUrl, fallbackSrc: fallbackImg, objectFit: "contain", alt: "", bg: "#F5F5F5", cursor: "pointer", "data-test": "image", alignSelf: "stretch" })), screen === "medium" && (_jsx(Image, { width: "100%", height: "100%", src: fileUrl, fallbackSrc: fallbackImg, alt: "", bg: "#F5F5F5", cursor: "pointer", objectFit: "contain", "data-test": "image", alignSelf: "stretch" })), screen === "small" && (_jsx(Image, { width: "100%", height: "100%", src: fileUrl, fallbackSrc: fallbackImg, alt: "", bg: "#F5F5F5", cursor: "pointer", objectFit: "contain", "data-test": "image", alignSelf: "stretch" })), _jsxs(Box, Object.assign({ width: "100%", position: "absolute", bottom: "8px", bg: "rgba(255, 255, 255, 0.5)", padding: "12px" }, { children: [fileTitle && (_jsx(Text, Object.assign({ textAlign: "left", fontSize: "12px" }, { children: filename }))), fileSize && (_jsxs(Text, Object.assign({ textAlign: "left", fontSize: "12px" }, { children: [(filesize / 1000000).toPrecision(3), " MB"] })))] }))] })));
        };
        const masonryColumnCount = React.useMemo(() => {
            return screen === "large" ? 4 : screen === "medium" ? 3 : 2;
        }, [screen]);
        const masonryItems = files === null || files === void 0 ? void 0 : files.map(function (file) {
            return (_jsxs(Box, Object.assign({ display: "inline-block", width: "100%", maxWidth: {
                    base: "146px",
                    md: "231px",
                    lg: "269px",
                }, maxHeight: screen === "small" ? "208px" : "319px", height: file.mimetype.startsWith("image") && screen === "small"
                    ? "208px"
                    : file.mimetype.startsWith("image") && screen !== "small"
                        ? "319px"
                        : undefined, margin: "8px", border: "1px", borderStyle: "solid", borderColor: "#E7E7E7", paddingX: "8px" }, { children: [file.mimetype.startsWith("image") ? (_jsx(Box, Object.assign({ height: screen === "small" ? "148px" : "259px" }, { children: _jsx(Image, { src: getFileURL(file.filename), fallbackSrc: fallbackImg, objectFit: "fill", width: screen === "large"
                                ? "253px"
                                : screen === "medium"
                                    ? "215px"
                                    : "130px", height: screen === "small" ? "148px" : "259px", borderRadius: "4px", alt: "", bg: "#F5F5F5", verticalAlign: "center" }) }))) : file.mimetype.startsWith("video") ? (_jsx(Box, Object.assign({ maxWidth: screen === "large"
                            ? "253px"
                            : screen === "medium"
                                ? "215px"
                                : "130px", height: screen === "small" ? "68px" : "136px", width: "100%", alignItems: "center", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, verticalAlign: "center" }, { children: _jsx(Icon, { as: Movie, objectFit: "fill", boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : file.mimetype === "application/pdf" ? (_jsx(Box, Object.assign({ maxWidth: screen === "large"
                            ? "253px"
                            : screen === "medium"
                                ? "215px"
                                : "130px", height: screen === "small" ? "68px" : "136px", width: "100%", alignItems: "center", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, verticalAlign: "center" }, { children: _jsx(Icon, { as: FileBlank, objectFit: "fill", boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : (_jsx(Box, Object.assign({ maxWidth: screen === "large"
                            ? "253px"
                            : screen === "medium"
                                ? "215px"
                                : "130px", height: screen === "small" ? "68px" : "136px", width: "100%", alignItems: "center", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, verticalAlign: "center" }, { children: _jsx(Icon, { as: Upload, objectFit: "fill", boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))), _jsxs(Box, Object.assign({ maxWidth: screen === "large"
                            ? "253px"
                            : screen === "medium"
                                ? "215px"
                                : "130px", width: "100%", height: "36px", justifyContent: "left", paddingTop: 2, marginBottom: 2 }, { children: [fileTitle && (_jsx(Text, Object.assign({ textAlign: "left", fontSize: "12px", paddingLeft: 1, noOfLines: 1 }, { children: file.filename }))), fileSize && (_jsxs(Text, Object.assign({ textAlign: "left", fontSize: "11px", paddingLeft: 1 }, { children: [(file.size / 1000000).toPrecision(3), " MB"] })))] }))] }), file.filename));
        });
        return (_jsx(Box, Object.assign({ paddingX: "16px" }, { children: _jsxs(FormControl, { children: [_jsxs(Box, Object.assign({ marginY: 0.5, display: "flex", justifyContent: "space-between" }, { children: [_jsx(FormLabel, Object.assign({ fontSize: "20px", htmlFor: props.instance.id, m: "0", fontWeight: "600", alignSelf: "center", letterSpacing: "-0.2px", marginLeft: 2 }, { children: componentTitle })), _jsx(ButtonGroup, Object.assign({ variant: "solid", spacing: "2", p: 1, border: "1px", borderColor: "gray.200", rounded: "md", size: "32px", hidden: disableChangeLayout }, { children: layoutOptions.map((opt) => (_jsx(IconButton, { mx: 2, "aria-label": opt.icon, size: "sm", onClick: () => {
                                        setLayoutState({ value: opt.value });
                                    }, icon: _jsx(Icon, { boxSize: "12px", as: iconsList[opt.icon] }), color: layoutState.value === opt.value
                                        ? `${props.app.theme.options.primaryColor}`
                                        : "#001e4d", bgColor: layoutState.value === opt.value
                                        ? `${props.app.theme.options.primaryColor}23`
                                        : "#FFFFFF", rounded: "md", _hover: {
                                        bg: `${props.app.theme.options.primaryColor}`,
                                        color: "white",
                                    } }, opt.value))) }))] })), (files === null || files === void 0 ? void 0 : files.length) && currentlayout === "Grid" && (_jsx(Grid, Object.assign({ templateColumns: screen === "large"
                            ? "repeat(4, 1fr)"
                            : screen === "medium"
                                ? "repeat(3, 1fr)"
                                : "repeat(2, 1fr)", gap: "12px", marginX: 2 }, { children: files.map((file) => (_jsx(Box, Object.assign({ display: "flex", width: "100%", height: "100%", justifyContent: "center", alignItems: "center", borderRadius: "4px", marginTop: 2, border: "1px", borderStyle: "solid", borderColor: "#E7E7E7" }, { children: _jsxs(Box, Object.assign({ height: { base: "138px", md: "214px" }, width: "100%", display: "inline-block", gap: 1, boxSizing: "border-box", paddingX: "8px" }, { children: [file.mimetype.startsWith("image") ? (_jsx(Image, { src: getFileURL(file.filename), fallbackSrc: fallbackImg, objectFit: "fill", width: "100%", maxWidth: { base: "130px", md: "215px", lg: "253px" }, height: { base: "82px", md: "158px" }, borderRadius: "4px", alt: "", alignItems: "stretch", verticalAlign: "center" })) : file.mimetype.startsWith("video") ? (_jsx(Box, Object.assign({ height: { base: "82px", md: "158px" }, alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, verticalAlign: "center" }, { children: _jsx(Icon, { as: Movie, boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : file.mimetype === "application/pdf" ? (_jsx(Box, Object.assign({ height: { base: "82px", md: "158px" }, alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, verticalAlign: "center" }, { children: _jsx(Icon, { as: FileBlank, boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : (_jsx(Box, Object.assign({ height: { base: "82px", md: "158px" }, alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, verticalAlign: "center" }, { children: _jsx(Icon, { as: Upload, boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))), fileTitle && (_jsx(Text, Object.assign({ textAlign: "left", fontSize: "12px", paddingLeft: 1, marginTop: 2, noOfLines: 1 }, { children: file.filename }))), fileSize && (_jsxs(Text, Object.assign({ textAlign: "left", fontSize: "12px", paddingLeft: 1 }, { children: [(file.size / 1000000).toPrecision(3), " MB"] })))] })) }), file.filename))) }))), (files === null || files === void 0 ? void 0 : files.length) && currentlayout === "List" && (_jsx(Flex, Object.assign({ alignItems: "center", flexDirection: "column", gap: "16px" }, { children: files.map((file) => (_jsx(Box, Object.assign({ display: "flex", width: "100%", height: "100%", justifyContent: "center", alignItems: "center", borderRadius: "4px", padding: "12px 16px", border: "1px", borderStyle: "solid", borderColor: "#E7E7E7" }, { children: _jsxs(Box, Object.assign({ height: "100%", width: "100%", display: "flex", flexDirection: "row", boxSizing: "border-box", justifyContent: "center" }, { children: [file.mimetype.startsWith("image") ? (_jsx(Image, { src: getFileURL(file.filename), fallbackSrc: fallbackImg, objectFit: "fill", height: "64px", width: "64px", minWidth: "64px", borderRadius: "4px", alignItems: "stretch", alt: "", marginLeft: 1, verticalAlign: "center" })) : file.mimetype.startsWith("video") ? (_jsx(Box, Object.assign({ minWidth: "64px", height: "64px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, marginLeft: 1 }, { children: _jsx(Icon, { as: Movie, objectFit: "fill", boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : file.mimetype === "application/pdf" ? (_jsx(Box, Object.assign({ minWidth: "64px", width: "64px", height: "64px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, marginLeft: 1 }, { children: _jsx(Icon, { as: FileBlank, boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : (_jsx(Box, Object.assign({ minWidth: "64px", width: "64px", height: "64px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, marginLeft: 1 }, { children: _jsx(Icon, { as: Upload, boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))), _jsxs(Box, Object.assign({ width: "100%", alignSelf: "center", paddingLeft: 4 }, { children: [fileTitle && (_jsx(Text, Object.assign({ textAlign: "left", fontSize: "12px", noOfLines: 1 }, { children: file.filename }))), fileSize && (_jsxs(Text, Object.assign({ textAlign: "left", fontSize: "12px" }, { children: [(file.size / 1000000).toPrecision(3), " MB"] })))] }))] })) }), file.filename))) }))), (files === null || files === void 0 ? void 0 : files.length) && currentlayout === "Carousel" && (_jsxs(Box, Object.assign({ flex: "1", flexDirection: "column", justifyContent: "center", alignItems: "center", padding: "0px" }, { children: [_jsx(AspectRatio, Object.assign({ ratio: 16 / 9, position: "relative" }, { children: ((_b = (_a = files[currentFileIndex]) === null || _a === void 0 ? void 0 : _a.mimetype) === null || _b === void 0 ? void 0 : _b.startsWith("image")) ? (carouselImage(files[currentFileIndex].filename, files[currentFileIndex].size)) : ((_d = (_c = files[currentFileIndex]) === null || _c === void 0 ? void 0 : _c.mimetype) === null || _d === void 0 ? void 0 : _d.startsWith("video")) ? (_jsxs(Box, Object.assign({ width: "100%", height: "100%", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, marginLeft: 1, position: "relative" }, { children: [_jsx(Icon, { as: Movie, objectFit: "fill", boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }), _jsxs(Box, Object.assign({ maxWidth: screen === "large"
                                                ? "1000px"
                                                : screen === "medium"
                                                    ? "486px"
                                                    : "320px", maxHeight: "56px", position: "absolute", left: "2px", bottom: "8px", paddingX: "12px" }, { children: [fileTitle && (_jsx(Text, Object.assign({ textAlign: "left", fontSize: "12px", noOfLines: 1 }, { children: files[currentFileIndex].filename }))), fileSize && (_jsxs(Text, Object.assign({ textAlign: "left", fontSize: "11px" }, { children: [(files[currentFileIndex].size / 1000000).toPrecision(3), " ", "MB"] })))] }))] }))) : ((_e = files[currentFileIndex]) === null || _e === void 0 ? void 0 : _e.mimetype) === "application/pdf" ? (_jsxs(Box, Object.assign({ width: "100%", height: "100%", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, position: "relative" }, { children: [_jsx(Icon, { as: FileBlank, height: "100%", boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }), _jsxs(Box, Object.assign({ maxWidth: screen === "large"
                                                ? "1000px"
                                                : screen === "medium"
                                                    ? "486px"
                                                    : "320px", maxHeight: "56px", width: "100%", position: "absolute", left: "2px", bottom: "8px", paddingX: "12px" }, { children: [fileTitle && (_jsx(Text, Object.assign({ textAlign: "left", fontSize: "12px", noOfLines: 1 }, { children: files[currentFileIndex].filename }))), fileSize && (_jsxs(Text, Object.assign({ textAlign: "left", fontSize: "11px" }, { children: [(files[currentFileIndex].size / 1000000).toPrecision(3), " ", "MB"] })))] }))] }))) : (_jsxs(Box, Object.assign({ width: "100%", height: "100%", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, position: "relative" }, { children: [_jsx(Icon, { as: Upload, height: "100%", boxSize: 10, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }), _jsxs(Box, Object.assign({ maxWidth: screen === "large"
                                                ? "1000px"
                                                : screen === "medium"
                                                    ? "486px"
                                                    : "320px", maxHeight: "56px", width: "100%", position: "absolute", left: "2px", bottom: "8px", paddingX: "12px" }, { children: [fileTitle && (_jsx(Text, Object.assign({ textAlign: "left", fontSize: "12px", noOfLines: 1 }, { children: files[currentFileIndex].filename }))), fileSize && (_jsxs(Text, Object.assign({ textAlign: "left", fontSize: "11px" }, { children: [(files[currentFileIndex].size / 1000000).toPrecision(3), " ", "MB"] })))] }))] }))) })), _jsx(Box, Object.assign({ display: { base: "initial", md: "none" }, p: 0, m: 0, alignContent: "center", justifyContent: "center" }, { children: _jsx(Carousel, Object.assign({ className: "SmallCarousel", dragging: true, slidesToShow: 4, cellAlign: Alignment.Center, scrollMode: ScrollMode.page, defaultControlsConfig: {
                                        pagingDotsStyle: {
                                            display: "none",
                                            marginLeft: 2,
                                        },
                                    }, style: {
                                        width: "90%",
                                        padding: "2",
                                    }, disableEdgeSwiping: true, renderCenterRightControls: ({ currentSlide, nextSlide }) => (_jsx(IconButton, { "aria-label": "NextButton", icon: _jsx(ArrowRightAlt, {}), size: "sm", background: "white", onClick: () => {
                                            if (currentSlide + 1 < files.length) {
                                                setCurrentFileIndex(currentSlide + 1);
                                                nextSlide();
                                            }
                                        }, marginRight: "25px", color: "black", marginTop: 4 })), renderCenterLeftControls: ({ currentSlide, previousSlide, }) => (_jsx(IconButton, { "aria-label": "PreviousButton", icon: _jsx(ArrowLeftAlt, {}), size: "sm", alignSelf: "center", borderColor: "#E7E7E7", background: "white", onClick: () => {
                                            if (currentSlide - 1 >= 0) {
                                                setCurrentFileIndex(currentSlide - 1);
                                                previousSlide();
                                            }
                                        }, marginLeft: "25px", marginTop: 4, color: "black" })) }, { children: files.map((file) => (_jsx(Box, Object.assign({ marginTop: 4, height: "100%", width: "100%", display: "flex", justifyContent: "center", paddingLeft: 10, borderRadius: "4px", hidden: currentFileIndex > files.indexOf(file) + 1 ||
                                            currentFileIndex + 1 < files.indexOf(file) }, { children: file.mimetype.startsWith("image") ? (_jsx(Image, { src: getFileURL(file.filename), fallbackSrc: fallbackImg, objectFit: "fill", height: "48px", width: "48px", minWidth: "48px", borderRadius: "4px", border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}`, alignItems: "stretch", alt: "" })) : file.mimetype.startsWith("video") ? (_jsx(Box, Object.assign({ minWidth: "48px", height: "48px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}`, bgColor: `${props.app.theme.options.primaryColor}23` }, { children: _jsx(Icon, { as: Movie, objectFit: "fill", boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : file.mimetype === "application/pdf" ? (_jsx(Box, Object.assign({ minWidth: "48px", width: "48px", height: "48px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}` }, { children: _jsx(Icon, { as: FileBlank, boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : (_jsx(Box, Object.assign({ minWidth: "48px", width: "48px", height: "48px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}` }, { children: _jsx(Icon, { as: Upload, boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) }), file.filename))) })) })), _jsx(Box, Object.assign({ display: { base: "none", md: "initial" }, p: 0, m: 0 }, { children: _jsx(Carousel, Object.assign({ className: "LargeCarousel", dragging: true, slidesToShow: screen === "large" ? 11 : 8, cellSpacing: screen === "medium" && 4, cellAlign: Alignment.Center, scrollMode: ScrollMode.remainder, defaultControlsConfig: {
                                        pagingDotsStyle: {
                                            display: "none",
                                        },
                                    }, style: {
                                        width: "95%",
                                        padding: "2",
                                    }, renderCenterRightControls: ({ currentSlide, nextSlide }) => (_jsx(IconButton, { "aria-label": "NextButton", icon: _jsx(ArrowRightAlt, {}), size: "sm", borderColor: "#E7E7E7", background: "white", onClick: () => {
                                            if (currentSlide + 1 < files.length) {
                                                setCurrentFileIndex(currentSlide + 1);
                                                nextSlide();
                                            }
                                        }, marginRight: screen === "large" ? "90px" : "50px", color: "black", marginTop: 4 })), renderCenterLeftControls: ({ currentSlide, previousSlide, }) => (_jsx(IconButton, { "aria-label": "PreviousButton", icon: _jsx(ArrowLeftAlt, {}), size: "sm", borderColor: "#E7E7E7", background: "white", alignSelf: "center", onClick: () => {
                                            if (currentSlide - 1 >= 0) {
                                                setCurrentFileIndex(currentSlide - 1);
                                                previousSlide();
                                            }
                                        }, marginLeft: screen === "large" ? "110px" : "50px", color: "black", marginTop: 4 })) }, { children: files.map((file) => (_jsx(Box, Object.assign({ marginTop: 4, display: "flex", justifyContent: "center", justifySelf: "center", flexDirection: "row", borderRadius: "4px", hidden: screen === "large"
                                            ? currentFileIndex > files.indexOf(file) + 4 ||
                                                currentFileIndex + 4 < files.indexOf(file)
                                            : currentFileIndex > files.indexOf(file) + 2 ||
                                                currentFileIndex + 2 < files.indexOf(file), paddingLeft: screen === "large" ? 20 : 14 }, { children: file.mimetype.startsWith("image") ? (_jsx(Image, { src: getFileURL(file.filename), fallbackSrc: fallbackImg, objectFit: "fill", height: "48px", width: "48px", minWidth: "48px", borderRadius: "4px", border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}`, alignItems: "stretch", alt: "" })) : file.mimetype.startsWith("video") ? (_jsx(Box, Object.assign({ minWidth: "48px", height: "48px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}`, bgColor: `${props.app.theme.options.primaryColor}23` }, { children: _jsx(Icon, { as: Movie, objectFit: "fill", boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : file.mimetype === "application/pdf" ? (_jsx(Box, Object.assign({ minWidth: "48px", width: "48px", height: "48px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}` }, { children: _jsx(Icon, { as: FileBlank, boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) : (_jsx(Box, Object.assign({ minWidth: "48px", width: "48px", height: "48px", alignItems: "stretch", borderRadius: "4px", justifyContent: "center", display: "flex", bgColor: `${props.app.theme.options.primaryColor}23`, border: files[currentFileIndex] === file && "2px", borderColor: `${props.app.theme.options.primaryColor}` }, { children: _jsx(Icon, { as: Upload, boxSize: 6, alignSelf: "center", color: `${props.app.theme.options.primaryColor}` }) }))) }), file.filename))) })) }))] }))), (files === null || files === void 0 ? void 0 : files.length) && currentlayout === "Masonry" && (_jsx(Box, Object.assign({ className: "masonry", sx: { columnCount: masonryColumnCount, columnGap: "8px" }, boxSizing: "border-box", justifyContent: "center" }, { children: masonryItems })))] }) })));
    },
});
export default FileGallery;
//# sourceMappingURL=buildFileGallery.js.map