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 AnchoredTab = (props) => {

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

    return (
        <div className={'jp-desktop-anchore-tab'+ props.parentClassName}>
            <AppBar position="static" color="default">
                <Tabs
                    value={props.value}
                    onChange={props.onChange}
                    variant="scrollable"
                >
                    {
                        (props ? props.tabheader.map((tdata, index) => {
                            return (
                                <Tab
                                    key={index}
                                    label={tdata.tabHeader}
                                    aria-label={tdata.tabHeader}
                                    tabIndex={index + 1}
                                />
                            );
                        }) : '')
                    }
                </Tabs>
            </AppBar>
            {props.tabcontent ? props.tabcontent : props.onTabClick(asd[0])}
        </div>
    );
};

export default AnchoredTab;

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

};


AnchoredTab.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 */
    onAnchoreHorizontalTab: 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
};