import React from "react";
import getCompliedClassName from "../../utils/getCompliedClassName";
import getCompliedCustomId from "../../utils/getCompliedCustomId";
import Seperator from "./Seperator";
import style from "./Group.module.css";

export default function GroupSkeleton(props){
    let {
        tagName,
        children,
        direction,
        align,
        gap,
        seperator,
        seperatorTagName,
        customClassName,
        customId,
        wrap,
        tagAttributeProps
    }=props
    let classes = getCompliedClassName(customClassName,{
        [style.base] : true,
        [style[direction]] : !!direction,
        [style[align]]: !!align,
        [style[gap]]: !!gap,
        [style[wrap]]: !!wrap,
    },{
        [customClassName.base] : !!customClassName.base,
        [customClassName.direction] : !!customClassName.direction,
        [customClassName.align]: !!customClassName.align,
        [customClassName.gap]: !!customClassName.gap,
        [customClassName.wrap]: !!customClassName.wrap,
    })
    let nodes = [];
    if (seperator) {
        for (let index = 0; index < children.length - 1; index++) {
        const element = children[index];
        nodes.push(children[index]);
        nodes.push(
            <Seperator
            seperator={seperator}
            tagName={seperatorTagName}
            key={`seperator${index}`}
            />
        );
        }
        nodes.push(children[children.length - 1]);
    } else {
        nodes = children;
    }
    return React.createElement(tagName, {
        className: classes,
        "data-id": getCompliedCustomId(props, customId.group),
        ...tagAttributeProps,
        children: nodes
    });
}
