import React from 'react';
import cx from 'classnames';
import block from 'bem-block';

enum CONNECTION_TABS {
	BUSINESS_SEGMENTS = 'business_segments',
	OPERATIONAL_STRUCTURE = 'operational_structure'
}

const TABS = [
	// { Hidden for iteration one
	// 	id: CONNECTION_TABS.BUSINESS_SEGMENTS,
	// 	label: 'BUSINESS SEGMENTS',
	// 	beta: false
	// },
	{
		id: CONNECTION_TABS.OPERATIONAL_STRUCTURE,
		label: 'OPERATIONAL STRUCTURE',
		beta: true
	}
];

interface IConnectionTabsState {
	activeTab: CONNECTION_TABS;
}

class ConnectionTabs extends React.Component<{}, IConnectionTabsState> {
	tabContent: HTMLDivElement;

	state: IConnectionTabsState = {
		activeTab: CONNECTION_TABS.OPERATIONAL_STRUCTURE
	};

	_handleTabClick(
		tabId: CONNECTION_TABS,
		event: React.SyntheticEvent<HTMLLIElement>
	) {
		this.setState(oldState => ({
			activeTab: tabId
		}));
	}

	_renderTabContents(tabId: CONNECTION_TABS) {
		let tabContent;

		switch (tabId) {
			case CONNECTION_TABS.BUSINESS_SEGMENTS:
				tabContent = null;
				break;
			case CONNECTION_TABS.OPERATIONAL_STRUCTURE:
				tabContent = this.props.children;
				break;
		}

		return tabContent;
	}

	render() {
		const bem = block('connections-tabs');

		return (
			<div className="connections-tabs-container">
				<ul className={cx(bem('tabs'), 'list-unstyled')}>
					{TABS.map(tab => (
						<li
							className={cx('connections-tabs__tab', {
								'connections-tabs__tab--active':
									this.state.activeTab === tab.id
							})}
							onClick={this._handleTabClick.bind(this, tab.id)}
							key={tab.id}
						>
							<span className={bem('tab-text')}>{tab.label}</span>
							{/*{tab.beta ? <BetaTag tab /> : null}*/}
						</li>
					))}
				</ul>

				<div
					className={bem('content')}
					ref={ref => (this.tabContent = ref)}
				>
					<div className="connections-tabs__content-inner">
						{this._renderTabContents(this.state.activeTab)}
					</div>
				</div>
			</div>
		);
	}
}

export default ConnectionTabs;