import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import PropTypes from 'prop-types';

const MobileAnchoredHorizontalTab = (props) => {

  let asd = [];
  props.tabheader.forEach((ele, i) => {
    asd.push({
      ...ele,
      key: "_" + i,
      title: ele.tabMobHeader,
      value: ele.tabMobkey
    });
  });

  return (
    <div className={'jp-mobile-anchored-horizontal-tab '  + props.parentClassName}>
      <AppBar position="static" color="default">
        <Tabs
          value={props.value}
          onChange={props.onChange}
          variant="scrollable"
        >
          {
            (props ? props.tabheader.map((mdata, index) => {
              return (
                <Tab
                  key={index}
                  label={mdata.tabMobHeader}
                >
                </Tab>
              );
            }) : '')
          }
        </Tabs>
      </AppBar>
      {props.tabcontent ? props.tabcontent : props.onTabClick(asd[0])}
    </div>
  );
}

export default MobileAnchoredHorizontalTab;

MobileAnchoredHorizontalTab.defaultProps = {
    /** Class applied to parent container for additional styling  */
    parentClassName: ''

};


MobileAnchoredHorizontalTab.propTypes = {
    /** A required array of tab objects with keys and label properties. */
    mobTabList: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.array
    ]),
    /** Function which triggers on change of tabs. Receives tab and index as params */
    handleChangeMob: PropTypes.func,
    /** function which is getting called on click tab */
    onAnchoreHorizontalMobileTabClick: PropTypes.func,
    /** initial active tabPanel's key if activeKey is absent */
    mobval: PropTypes.string,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string
};