import React, { useMemo } from "react";
import { Box, FlexProps } from "@chakra-ui/react";

export type FlexboxAttributes = {
    direction: string;
    padding: string;
    margin: string;
    background: string;
    gap: string;
    responsive: string;
};

export type BaseFlexboxProps = {
    node: {
        attrs: FlexboxAttributes;
    };
    children: React.ReactNode;
    className?: string;
};

export function BaseFlexboxComponent({ node, children, className = "" }: BaseFlexboxProps) {
    // Apply styles based on attributes
    const containerStyle = useMemo(() => ({
        position: "relative" as const,
        display: "flex",
        flex: '1 1 0',
        width: "100%",
        backgroundColor: node.attrs.background,
        flexDirection: node.attrs.direction as any,
        padding: node.attrs.padding,
        margin: node.attrs.margin,
        gap: node.attrs.gap,
    }), [
        node.attrs.background,
        node.attrs.direction,
        node.attrs.padding,
        node.attrs.margin,
        node.attrs.gap
    ]);

    const flexDirection = useMemo<FlexProps['flexDirection']>(() => {
        try {
            const responsive = JSON.parse(node.attrs.responsive)
            const direction = node.attrs.direction
            const flexDirection = {
                base: responsive?.mobile?.direction || direction,
                md: responsive?.tablet?.direction,
                lg: direction,
            } as FlexProps['flexDirection']
            return flexDirection
        } catch (e) {

        }
        return node.attrs.direction as any
    }, [])


    return (
        <Box
            className={`flexbox-container ${className}`}
            {...containerStyle}
            flexDirection={flexDirection}
        >
            {children}
        </Box>
    );
}

export default BaseFlexboxComponent;