import PropTypes from "prop-types";
import tagAttributeProps,{tagAttributePropsName} from "../../propTypes/htmlAttributes.propTypes"
import customClassProps,  {customClassPropName} from "../../propTypes/customClassName.propTypes";
import automationProps, {automationPropsName} from "../../propTypes/automation.propTypes";
import iconOptionProps from "../../propTypes/iconOption.propTypes";
import tabConstantProps from "./Tab.constantProps"

export default {

    selectedValue : PropTypes.string,
    defaultValue : PropTypes.string,
    onChange : PropTypes.func,

    auto : PropTypes.bool,
    stretch : PropTypes.bool,
    align : PropTypes.oneOf([
        tabConstantProps.align.left,
        tabConstantProps.align.center,
        tabConstantProps.align.right
    ]),

    tabBarPosition : PropTypes.oneOf([
        tabConstantProps.barPosition.top,
        tabConstantProps.barPosition.left,
        tabConstantProps.barPosition.right,
        tabConstantProps.barPosition.bottom
    ]),

    scrollOptions : PropTypes.shape({

        previousIcon : PropTypes.any,
        nextIcon : PropTypes.any,
        defaultScroll : PropTypes.bool
        
    }),

    ...customClassProps,
    ...automationProps,
    ...tagAttributeProps
}


export const tabBarProps={
    selectedValue : PropTypes.string,
    defaultValue : PropTypes.string,
    onChange : PropTypes.func,

    leftBarOption : PropTypes.any,
    rightBarOption : PropTypes.any,

    size : PropTypes.string
}

export const tabProps={
   text : PropTypes.string,
   value : PropTypes.string,
   disabled : PropTypes.bool,
   onChange : PropTypes.func,
   ...iconOptionProps
}

export const tabContentProps={
    selectedValue : PropTypes.string,
    defaultValue : PropTypes.string,
    onChange : PropTypes.func
}

export const tabPanelProps={
    value : PropTypes.string,
    disabled : PropTypes.bool
}


// const a = ()=>{
//     return <TabContext onChange={handleValue} value={value} controls>
//                 <TabList>
//                     <Tab tabId="" active={selectedId==tabId} ></Tab>
//                     <Tab tabId=""></Tab>
//                     <Tab tabId=""></Tab>
//                 </TabList>
//                 <TabPanels>
//                     <TabPanel tabId="" active={selectedId==tabId} ></TabPanel>
//                     <TabPanel tabId="" active={selectedId==tabId} ></TabPanel>
//                     <TabPanel tabId="" active={selectedId==tabId} ></TabPanel>
//                     <TabPanel tabId="" active={selectedId==tabId} ></TabPanel>
//                 </TabPanels>
//     </TabContext>
// }
