import React, { useState, useEffect } from 'react';
import TabContext, { TabContainer, TabBar, TabBarNavLine, Tab, TabContent, TabPanel } from '../Tab';
import useTabAriaProps from '../useTabAriaProps';
import componentCategories from '../../../docs-utils/componentCategories';
import componentGroups from '../../../docs-utils/componentGroups';
/*{
   <TabContainer defaultTab='first-1' isManual onChange={()=>{}}>

  <div>

  <TabBar defaultTab='first-1' onChange={()=>{}} aria-label='model-tab' orientation="vertical">
    <Tab id='first-1' icon={<PhoneIcon />} label="First" iconPosition="start">First</Tab>
    <Tab id='second-2' disabled>Second</Tab>
    <Tab id='third-3'>Third</Tab>
  </TabBar>

  <search></>
  </div>
  <></>
  <TabContent>
    <TabPanel id='first-1'> First-Panel </TabPanel>
    <TabPanel id='second-2'> Second-Panel </TabPanel>
    <TabPanel id='third-3'> Third-Panel </TabPanel>
  </TabContent>


</TabContainer>  
}*/

function Tab__default(props) {
  let [state, selectedTabSet] = useState('third-3');
  let [selectedTab, setSelectedTab] = useState(2);
  let {
    tabListProps,
    tabProps,
    tabPanelProps,
    focusFirst
  } = useTabAriaProps(props, {
    wrap: true,
    focus: true,
    keyName: {
      left: ['a', 'shift+arrowleft'],
      right: ['d', 'shift+arrowright'],
      up: ['w', 'shift+arrowup'],
      down: ['s', 'shift+arrowdown']
    }
  });
  let tabsArr = ['First-Tab', 'Second-Tab', 'Third-Tab'];
  let tabsPanel = ['Content for the first panel', 'Content for the second panel', 'Content for the third panel'];

  let handleTab = itemId => {
    setSelectedTab(() => itemId); //focusFirst(itemId)
  }; // useEffect(()=>{
  //   focusFirst(selectedTab)
  // },[selectedTab])


  tabListProps = tabListProps(props); //tabpanelProps = tabpanelProps(props);

  return /*#__PURE__*/React.createElement("div", {
    style: {
      padding: '0 20px 50px 20px',
      margin: '100px'
    }
  }, /*#__PURE__*/React.createElement(TabContext, {
    defaultValue: "second-2",
    onChange: value => {
      console.log(value);
    },
    wrapper: () => {}
  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TabBarNavLine, {
    wrapper: () => {},
    ariaLabel: "tab123"
  }, /*#__PURE__*/React.createElement(Tab, {
    value: "second-2"
  }, "Second"), /*#__PURE__*/React.createElement(Tab, {
    value: "third-3"
  }, "Third"), /*#__PURE__*/React.createElement(Tab, {
    value: "four-4"
  }, "Four")))), /*#__PURE__*/React.createElement(TabContent, {
    wrapper: () => {}
  }, /*#__PURE__*/React.createElement(TabPanel, {
    value: "second-2"
  }, " Second-Panel "), /*#__PURE__*/React.createElement(TabPanel, {
    value: "third-3"
  }, " Third-Panel "), /*#__PURE__*/React.createElement(TabPanel, {
    value: "four-4"
  }, "Four-Panel"))), /*#__PURE__*/React.createElement(TabContainer, {
    selectedValue: state,
    onChange: value => {
      selectedTabSet(value);
      console.log(value);
    },
    customClassName: {
      tabContainer: 'class-TabContainer'
    }
  }, /*#__PURE__*/React.createElement("div", null, 'sudalai-solve'), /*#__PURE__*/React.createElement(TabBar, {
    customClassName: {
      tabBar: 'class-TabBar'
    }
  }, /*#__PURE__*/React.createElement(Tab, {
    value: "first-1"
  }, "First "), /*#__PURE__*/React.createElement(Tab, {
    value: "second-2"
  }, "Second"), /*#__PURE__*/React.createElement(Tab, {
    value: "third-3"
  }, "Third")), /*#__PURE__*/React.createElement(TabContent, null, /*#__PURE__*/React.createElement(TabPanel, {
    value: "first-1"
  }, " First-Panel "), /*#__PURE__*/React.createElement(TabPanel, {
    value: "second-2"
  }, " Second-Panel "), /*#__PURE__*/React.createElement(TabPanel, {
    value: "third-3"
  }, " Third-Panel "))), /*#__PURE__*/React.createElement(TabContainer, {
    defaultValue: "second-2",
    onChange: value => {
      console.log(value);
    },
    customClassName: {
      tabContainer: 'class-TabContainer'
    }
  }, /*#__PURE__*/React.createElement(TabBarNavLine, {
    customClassName: {
      tabBar: 'class-TabBar'
    }
  }, /*#__PURE__*/React.createElement(Tab, {
    value: "first-1"
  }, "First "), /*#__PURE__*/React.createElement(Tab, {
    value: "second-2"
  }, "Second"), /*#__PURE__*/React.createElement(Tab, {
    value: "third-3",
    customClassName: {
      selected: 'tab-select'
    }
  }, "Third")), /*#__PURE__*/React.createElement(TabContent, null, /*#__PURE__*/React.createElement(TabPanel, {
    value: "first-1"
  }, " First-Panel "), /*#__PURE__*/React.createElement(TabPanel, {
    value: "second-2"
  }, " Second-Panel "), /*#__PURE__*/React.createElement(TabPanel, {
    value: "third-3"
  }, " Third-Panel "))));
}

export default Tab__default;

if (false) {
  Tab__default.docs = {
    componentGroup: componentGroups.Components,
    folderName: componentCategories.UCL
  };
}

Tab__default.defaultProps = {
  ariaLabel: 'sdcsdcsdc',
  ariaLabelledby: '1234ariaLabelledby'
};