import React from 'react';
import Tabs, { TabPane } from 'rc-tabs';
import TabContent from 'rc-tabs/lib/TabContent';
import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
import PropTypes from 'prop-types';

/**
 * A stateless component for  AnchoreHoriZontalTab. It uses rc-tabs library and can accept the props used by the library for other additional functionality which library provides.
 */

const AnchoreHorizontalTab = props => {

    return (
        <div className={'jp-desktop-anchore-horiZontal-tab ' + props.parentClassName}>
            <Tabs
                {...props}
                defaultActiveKey={props.defaultActiveKey}
                renderTabBar={() => (
                    <ScrollableInkTabBar  />
                )
                }
                renderTabContent={() => <TabContent />}
                onChange={props.onAnchoreHorizontalTabChange}
            >
                {
                    (props ? props.tabList.map((ele, index) => {
                        if (ele.isDisplay === true) {
                            return (
                                <TabPane tab={ele.tabHeader} tabIndex='0' aria-label={ele.tabHeader} key={ele.tabKey} id={ele.tabid} {...props}>
                                    {props.onAnchoreHorizontalTabClick(ele)}
                                </TabPane>
                            );
                        }
                    }) : '')
                }
            </Tabs>
        </div>
    );
};
export default AnchoreHorizontalTab;

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