import React from 'react';
import PropTypes from 'prop-types';

import IDUtil from '../../util/IDUtil'; // for generating unique CSS classnames for this component
import Info from '../shared/Info';
import classNames from 'classnames';

/*
	This component shows the tabs in the viewer columns
*/

export default class Tabs extends React.Component {
    renderTab(tab) {
        return (
            <div
                key={tab.id}
                className={classNames(
                    'tab',
                    {
                        active: this.props.activeTab === tab.id
                    },
                    tab.class ? tab.class : ''
                )}
                onClick={tab.onClick}
            >
                {tab.title}
                <Info id={'info_' + tab.id} text={tab.description} />
            </div>
        );
    }
    render() {
        return (
            <div className={IDUtil.cssClassName('viewer-tabs')}>
                {/* render the tabs */}
                {this.props.tabs.map(tab => this.renderTab(tab))}
            </div>
        );
    }
}

Tabs.propTypes = {
    activeTab: PropTypes.string,
    tabs: PropTypes.arrayOf(
        PropTypes.shape({
            id: PropTypes.string.isRequired,
            title: PropTypes.string.isRequired,
            description: PropTypes.string,
            onClick: PropTypes.func.isRequired
        })
    )
};