import React, { Component } from 'react';
import { Tabs, DefaultTabBar } from 'rmc-tabs';
import PropTypes from 'prop-types';

/**
 * A statefull component for Tab Content. It uses rmc-tabs library and can accept the props used by the library for other additional functionality which library provides.
 */

class TabContent extends Component{

    state = {
        // tabHeader: To display active tab header
        tabHeader: this.props.tabList[0].label,
        // underlineStyle: To update underline style
        underlineStyle: { marginLeft: 0 },
        // page: index of the current tab
        page: 0
    };
    
    onChangeHandler (tab, index) {
        if (this.props.onChange) this.props.onChange(tab, index);
        this.setState({
            tabHeader: tab.label,
            underlineStyle: { marginLeft: index*8+'px' },
            page: index
        });
    }

    render() {

        let tabProps = {...this.props};
        let tabIndex = 0;
        if (tabProps.onChange) delete tabProps.onChange;
        delete tabProps.tabBarUnderlineStyle;
        delete tabProps.tabs;
        delete tabProps.children;
        
        return (
            <div>
                <div className="jp-tab-content">
                    <div 
                        className="jp-tab-header" 
                        aria-label={this.state.tabHeader}>
                        {this.state.tabHeader}
                    </div>
                    <Tabs tabBarUnderlineStyle={this.state.underlineStyle} 
                        tabs={this.props.tabList} 
                        onChange={this.onChangeHandler.bind(this)}
                        page={this.state.page}
                        destroyInactiveTab
                        renderTabBar={(props) => ( 
                            <DefaultTabBar tabIndex="0"
                                renderTab={(tab) => {
                                    return (
                                        <div role="button"
                                            className="jp-tab-title"
                                            aria-label={tab.label}
                                            tabIndex="0" 
                                            onClick={this.onChangeHandler.bind(this, tab, tabIndex)} 
                                            onKeyPress={this.onChangeHandler.bind(this, tab, tabIndex++)} />
                                    );
                                }}
                                {...props}
                            />
                        )}
                        {...tabProps}
                    >
                        {this.props.children}
                    </Tabs>
                </div>
            </div>
        );
    }
}

export default TabContent;

TabContent.propTypes = {
    /** A required array of objects with keys and label properties. */
    tabList : PropTypes.arrayOf(PropTypes.shape({
        key: PropTypes.string,
        label: PropTypes.string
    })).isRequired,
    /** Children representing the content for each key in tabList.  */
    children : PropTypes.node.isRequired,
    /** Function which triggers on change of tabs. Receives tab and index as params */
    onChange : PropTypes.func
};