import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import React from "react";
import { AspectRatio, Box, Skeleton } from "@chakra-ui/react";
import { registerComponent } from "../interfaces";
import SwiperCore, { Pagination, Autoplay } from "swiper";
import Carousel, { Alignment, ScrollMode } from "nuka-carousel";
import { css } from "@emotion/react";
import { fallbackImg } from "../utils/fallbackImage";
SwiperCore.use([Pagination, Autoplay]);
const Item = (props) => {
    const source = props.hooks.useEvaluate(props.properties.source);
    const action = props.hooks.useActionTrigger(props.properties.action, props.item, props.pageSource);
    const ImageGallery = React.useCallback(() => (_jsx(Box, Object.assign({ px: props.properties.style === "frame" && "4", py: props.properties.style === "frame" && "2" }, { children: _jsx(Box, { bgImage: `url('${source || fallbackImg}')`, bgPosition: "center", bgSize: "cover", bgRepeat: "no-repeat", rounded: props.properties.rounded ? "lg" : "none", onClick: action.handleClick, width: "100%", height: "100%", "data-test": "gallery-image" }) }))), [props.properties.style, props.properties.rounded, source, fallbackImg]);
    return (_jsxs(Box, Object.assign({ p: 0, m: 0 }, { children: [_jsx(Box, Object.assign({ p: 0, m: 0, display: { base: "initial", md: "none" } }, { children: _jsx(AspectRatio, Object.assign({ ratio: Number(props.properties.ratio) }, { children: _jsx(ImageGallery, {}) })) })), _jsx(Box, Object.assign({ p: 0, m: 0, display: { base: "none", md: "initial" } }, { children: _jsx(AspectRatio, Object.assign({ ratio: 1.7 }, { children: _jsx(ImageGallery, {}) })) }))] })));
};
const GalleryComponent = registerComponent("Gallery", {
    type: "list",
    icon: "Gallery",
    group: "media",
    display: "block",
    hidden: true,
    defaultProps: {
        source: "",
        ratio: "1.7",
        style: "full",
        rounded: false,
        autoplay: false,
        action: [{ type: "none" }],
    },
    propDefinition: {
        source: { group: "Design", type: "expression", options: {} },
        ratio: {
            group: "Design",
            type: "string",
            options: {
                format: "select",
                options: [
                    { label: "Square", value: "1" },
                    { label: "16:9", value: "1.7" },
                    { label: "4:3", value: "1.3" },
                    { label: "2:1", value: "2" },
                ],
            },
        },
        style: {
            group: "Design",
            type: "string",
            options: {
                format: "select",
                options: [
                    {
                        label: "Full Width",
                        value: "full",
                    },
                    {
                        label: "With Frame",
                        value: "frame",
                    },
                ],
            },
        },
        rounded: {
            group: "Design",
            type: "boolean",
            hidden: false,
            options: { format: "boolean" },
        },
        autoplay: {
            group: "Design",
            type: "boolean",
            options: { format: "boolean" },
        },
        action: { group: "Action", type: "action", options: [{ type: "none" }] },
    },
    Component: (props) => {
        if (props.data.component.loading) {
            return _jsx(Skeleton, { rounded: "lg", height: "224px" });
        }
        return (_jsxs(Box, Object.assign({ mb: 4, css: css `
          width: 100%;
        `, flex: "1" }, { children: [_jsx(Box, Object.assign({ display: { base: "initial", md: "none" }, p: 0, m: 0 }, { children: _jsx(Carousel, Object.assign({ autoplay: true, cellAlign: Alignment.Left, withoutControls: true, dragging: true, scrollMode: ScrollMode.remainder }, { children: !props.source.target
                            ? Array.from(Array(5)).map((_, i) => (_jsx(Item, Object.assign({ item: props.data.page.row }, props), i)))
                            : props.data.component.rows.map((item, i) => (_jsx(props.components.ListItemVariables, Object.assign({ variables: item }, { children: _jsx(Item, Object.assign({ item: item }, props)) }), i))) })) })), _jsx(Box, Object.assign({ display: { base: "none", md: "initial" }, p: 0 }, { children: _jsx(Carousel, Object.assign({ dragging: true, slidesToShow: 2, cellSpacing: 16, cellAlign: Alignment.Left, scrollMode: ScrollMode.remainder, defaultControlsConfig: {
                            nextButtonText: ">",
                            nextButtonStyle: {
                                padding: "0px",
                                width: "28px",
                                height: "28px",
                                backgroundColor: "white",
                                borderRadius: "40px",
                                color: "black",
                            },
                            prevButtonText: "<",
                            prevButtonStyle: {
                                padding: "0px",
                                width: "28px",
                                height: "28px",
                                backgroundColor: "white",
                                borderRadius: "40px",
                                color: "black",
                            },
                            pagingDotsStyle: {
                                fill: props.app.theme.options.primaryColor,
                                margin: "18px 2px 2px 2px",
                                top: "100px",
                            },
                        } }, { children: !props.source.target
                            ? Array.from(Array(5)).map((_, i) => (_jsx(Item, Object.assign({ item: props.data.page.row }, props), i)))
                            : props.data.component.rows.map((item, i) => (_jsx(props.components.ListItemVariables, Object.assign({ variables: item }, { children: _jsx(Item, Object.assign({ item: item }, props)) }), i))) })) }))] })));
    },
});
export default GalleryComponent;
//# sourceMappingURL=buildGallery.js.map