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

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

const AnchoredHorizontalTabsMobile = (props) => {
    return (
        <div className={'jp-anchored-horizontal-tab-mobile ' + props.parentClassName}>
            <Tabs
                {...props}
                defaultActiveKey={props.defaultActiveKey}

                renderTabBar={() => (
                    <SwipeableInkTabBar pageSize={props.pageSize} speed={props.pageSpeed} />
                )
                }
                renderTabContent={() => <TabContent />}
                onChange={props.onAnchoreMobileTabChange}
            >
                {
                    (props ? props.mobileTabList.map((data, index) => {
                        return (
                            <TabPane tab={data.tabMobHeader} key={data.tabMobkey} id={data.tabidMob}>
                                {props.onAnchoreMobileTabClick(data)}
                            </TabPane>
                        );
                    }) : '')
                }
            </Tabs>
        </div>
        // </div >
    );
};

export default AnchoredHorizontalTabsMobile;

AnchoredHorizontalTabsMobile.defaultProps = {
    /** Property that is used show how many tabs to be displayed at one page*/
    pageSize: 1.8,
    /** Property that is used to handle the speed of swiping of tabs*/
    pageSpeed: 0.8,
    /** Class applied to parent container for additional styling  */
    parentClassName: ''

};


AnchoredHorizontalTabsMobile.propTypes = {
    /** A required array of tab objects with keys and label properties. */
    mobileTabList: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.array
    ]),
    /** Function which triggers on change of tabs. Receives tab and index as params */
    onAnchoreMobileTabChange: PropTypes.func,
    /** function which is getting called on click tab */
    onAnchoreMobileTabClick: PropTypes.func,
    /** initial active tabPanel's key if activeKey is absent */
    defaultActiveKey: PropTypes.string,
    /** Property that is used show how many tabs to be displayed at one page*/
    pageSize: PropTypes.number,
    /** Property that is used to handle the speed of swiping of tabs*/
    pageSpeed: PropTypes.number,
    /** Class applied to parent container for additional styling  */
    parentClassName: PropTypes.string
};