import React from 'react';
import SkeletonThemeWrapper from "../../customization-cornor/skeletonCustomization";
import useSelectionControl from "../../custom-hooks/useSelectionControl";
import TabContext from './TabContext';

export default function TabContainerBehaviour(props){
    const [selectedValue,setSelectedValue, onChangeCreation] = useSelectionControl(props);
    let renderProps = { 
        selectedValue, 
        onChange: onChangeCreation(setSelectedValue) 
    };

    let { renderComponent, ...basicProps} = props;
    return <SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={renderComponent} />;
}

export function TabContextBehaviour(props){
  
    const [selectedValue,setSelectedValue, onChangeCreation] = useSelectionControl(props);
    let renderProps = { 
        selectedValue, 
        onChange: onChangeCreation(setSelectedValue)
     };
     let { renderComponent, ...basicProps} = props;
    return <TabContext.Provider><SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={renderComponent} /></TabContext.Provider>
}

export function TabBar(props){
    let renderProps = {};
    let { renderComponent, ...basicProps} = props;
    return <SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={renderComponent} />;
}

export function Tab(props){
    
    let  { selectedValue, setSelectedValue, onChangeCreation } = React.useContext(TabContext) || {};
    let renderProps = { 
        selectedValue, 
        onChange: onChangeCreation(setSelectedValue, props.onChange)
     };
     let { renderComponent, ...basicProps} = props;
    return <SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={renderComponent} />;
}

export function TabContent(props){
    let renderProps = {};
    let { renderComponent, ...basicProps} = props;
    return <SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={renderComponent} />;
}

export function TabPanel(props){
    let  { selectedValue } = React.useContext(TabContext) || {};
    let renderProps = { 
        selectedValue
    };
    let { renderComponent, ...basicProps} = props;
    return <SkeletonThemeWrapper basicProps={basicProps} renderProps={renderProps} component={props.renderComponent} />;
}