import useAccessNavigationManager from "../access-navigation-manager/useAccessNavigationManager";
import useFocusVisible from '../../accessibility-utils/focusVisible';

const useTabAriaProps = (props,configuration)=>{
    let navigationProps = React.useCallback(useAccessNavigationManager(props,configuration),[]); 
    let { rootElementProps,getItemProps,focusFirst } = navigationProps;
    //let { focusVisible,focusProps } = useFocusVisible(props);
    return {
          tablistProps: ({ariaLabel})=> {
            return{
              "role" : "tablist",
              "aria-label" : ariaLabel,
              ...rootElementProps
            }
          },
          tabProps : (props)=>{
            let { id,selectedId,ariaControls } = props;
            let { dataAriaItem,itemId } = getItemProps(id)
            return{
              "role" : "tab",
              "aria-selected" : selectedId === itemId,
              "tabindex" : selectedId === itemId ? "0" : "-1",
              //"tabindex" : "0",
              "aria-controls" : ariaControls,
              //...focusProps,
              ...dataAriaItem,
              itemId,
              //focusVisible
            }
          },  
          tabpanelProps : ({ariaLabelledby})=> {
            return{
              "role" : "tabpanel",
              "aria-labelledby" : ariaLabelledby,
              "tabindex" : "0"
            }
          },
          focusFirst
    }
  }

  export default useTabAriaProps;


//   let tagAriaProps= useTabAriaProps(props,{
//     activecss: style.popuplistFocus,
//     wrap: true,
//     onKeyDown: ()=>{}
//   });
//   let { tablistProps,tabProps,tabpanelProps } = tagAriaProps;
//   let { rootElementProps,inputProps,getItemProps,listElementProps,targetElementProps } = navigationProps;
//   <TabLayer {...tablistProps} {...rootElementProps}>
//       <TabItem {...tabProps} />
//       <TabItem />
//       <TabItem />
  
//       <TabPanel {...tabpanelProps} />
//       <TabPanel />
//       <TabPanel />
//   </TabLayer>
  
  
//   const TabLayer = (props)=>{
    
//     let  tagAriaProps= useTabAriaProps(props,{
//       activecss: style.popuplistFocus,
//       wrap: true
//     });
//     let { tablistProps,tabProps,tabpanelProps } = tagAriaProps;
//     return(
//       <TabLayer {...tablistProps}>
//           <TabItem {...tabProps} />
//           <TabItem />
//           <TabItem />
  
//           <TabPanel {...tabpanelProps} />
//           <TabPanel />
//           <TabPanel />
//       </TabLayer>
//     )
//   } 
  