import React, { useEffect, useState } from 'react'
import "./TabsContainer.css"
type Props = {
    active?: number
    children?: any
    headClass?: string
    itemClass?: string
    containerClass?: string
}
const TabsContainer = ({ active: active, children: children, headClass: headClass, itemClass: itemClass, containerClass: containerClass }: Props) => {
    const [Show, setShow] = useState(0)
    const [Content, setContent] = useState()
    useEffect(() => {
        if (children !== undefined) {
            setContent(
                children?.length === undefined ? [{
                    props: {
                        title: children.props.title,
                        children: children.props.children
                    }
                }] : children
            )
        }
        if (active === undefined) {
            setShow(1);
        }
        else {
            const ch = (children || []);
            if (active <= ch.length) {
                if (active === 0) {
                    setShow(1);
                }
                else {
                    setShow(active);
                }
            }
            else {
                setShow(1);
            }
        }
    }, [active, children])
    return (
        <div>
            {
                children === undefined ?
                    <div className='tabs-no-data'>
                        Expecting {"<TabsItem>"} in {"<TabsContainer>"}
                    </div>
                    :
                    <div>
                        <div className={`tabs-head ${headClass}`}>
                            {
                                (Content || []).map((d: any, x: number) => {
                                    return (
                                        <div className={`tabs-item ${Show === (x + 1) ? "active" : ""} ${itemClass}`} key={`tabs-item-${x}`} onClick={() => { setShow(x + 1) }}>
                                            {d.props.title}
                                        </div>
                                    )
                                })
                            }
                        </div>
                        {
                            (Content || []).map((d: any, x: number) => {
                                return (
                                    <div className={`tabs-container ${Show === (x + 1) ? "active" : ""} ${containerClass}`} key={`tabs-container-${x}`}>
                                        {d.props.children}
                                    </div>
                                )
                            })
                        }
                    </div>
            }

        </div>
    )
}
export default TabsContainer