import React from 'react';
import numeral from 'numeral';
import Dotdotdot from 'react-dotdotdot';
import cx from 'classnames';
import block from 'bem-block';
import { isListedToText } from 'di2-types';
import get from 'lodash/get';
import {
	ExternalActions,
	IConnectionCompanyData
} from './connection-map.component';
import { listedCountryText, sectorText } from './map/utilities';

interface IDisplayCompanyProps extends ExternalActions {
	company: IConnectionCompanyData;
	main?: boolean;
	collapsible?: boolean;
	parent?: boolean;
	bem?: block;
}

interface IDisplayCompanyState {
	collapsed: boolean;
}

const CountryCodeThumb: React.SFC<{
	country_iso3: string;
	active: boolean;
}> = ({ country_iso3, active }) => (
	<div
		className={cx('country-code-thumb', {
			'country-code-thumb--active': active
		})}
	>
		{country_iso3}
	</div>
);

export default class RootCompany extends React.Component<
	IDisplayCompanyProps,
	IDisplayCompanyState
> {
	state = {
		collapsed: false
	};

	componentWillMount() {
		if (this.props.collapsible) {
			this.setState(oldState => ({
				collapsed: true
			}));
		}
	}

	private _toggleCollapsed(event: React.MouseEvent) {
		event.preventDefault();
		if (this.props.collapsible) {
			this.setState(oldState => ({
				collapsed: !oldState.collapsed
			}));
		}
	}

	render() {
		const {
			company,
			main = false,
			parent = false,
			bem = block('root-company'),
			onNavigateToCompanyPage,
			onNavigateToConnectionMap,
			onAddToTargetList
		} = this.props;

		return company ? (
			<div
				className={cx(bem(), {
					[bem('main')]: main,
					[bem('parent')]: parent,
					[bem('collapsed')]: this.state.collapsed
				})}
			>
				<div
					className={cx(bem('title'), bem('title', { parent }))}
					onClick={this._toggleCollapsed.bind(this)}
				>
					{parent ? (
						<div className={bem('parent-title')}>Parent</div>
					) : null}

					<Dotdotdot clamp={2} className={bem('title-text')}>
						{company.name}
					</Dotdotdot>
				</div>

				<div className={bem('inner')}>
					<div className={bem('content')}>
						<div className={bem('meta-content')}>
							<ul className={cx(bem('meta'), 'list-unstyled')}>
								<li
									className={cx(
										bem('meta-item'),
										bem('meta-item--country')
									)}
								>
									<div className={bem('meta-item-title')}>
										Region
									</div>
									<CountryCodeThumb
										country_iso3={company.country_iso3}
										active={true}
									/>
								</li>
								{company.isScoutCompany ? (
									<React.Fragment>
										<li
											className={cx(
												bem('meta-item'),
												bem('meta-item', {
													ownership: true
												})
											)}
										>
											<div
												className={bem(
													'meta-item-title'
												)}
											>
												Ownership
											</div>
											<div
												className={bem(
													'meta-item-content'
												)}
											>
												{isListedToText(
													get(
														company,
														['company', 'isListed'],
														''
													)
												)}
											</div>
										</li>

										<li
											className={cx(
												bem('meta-item'),
												bem('meta-item', {
													revenue: true
												})
											)}
										>
											<div
												className={bem(
													'meta-item-title'
												)}
											>
												Revenue
											</div>
											<div
												className={bem(
													'meta-item-content'
												)}
											>
												{numeral(
													get(
														company,
														[
															'company',
															'operatingRevenue'
														],
														'Unknown'
													)
												).format('$0.000a')}
											</div>
										</li>
									</React.Fragment>
								) : (
									<li
										className={cx(
											bem('meta-item'),
											bem('meta-item', {
												ownership: true
											})
										)}
									>
										<div className={bem('meta-item-title')}>
											Ownership
										</div>
										<div
											className={bem('meta-item-content')}
										>
											{listedCountryText(company)}
										</div>
									</li>
								)}
							</ul>
							{company.isScoutCompany ? (
								<ul
									className={cx(bem('meta'), 'list-unstyled')}
								>
									<li
										className={cx(
											bem('meta-item'),
											bem('meta-item', { sector: true })
										)}
									>
										<div className={bem('meta-item-title')}>
											Sector
										</div>
										<div
											className={bem('meta-item-content')}
										>
											<Dotdotdot clamp={2}>
												{sectorText(company)}
											</Dotdotdot>
										</div>
									</li>
								</ul>
							) : null}
							<ul className={cx(bem('meta'), 'list-unstyled')}>
								<li
									className={cx(
										bem('meta-item'),
										bem('meta-item', { subsidiaries: true })
									)}
								>
									<div className={bem('meta-item-title')}>
										Total Subsidiaries
									</div>
									<div className={bem('meta-item-content')}>
										{company.subsidiaryCount}
									</div>
								</li>
							</ul>
						</div>
						{company.isScoutCompany ? (
							<div
								className={cx(
									bem('meta'),
									bem('meta', { actions: true })
								)}
							>
								{/*<button*/}
								{/*className={bem('action')}*/}
								{/*onClick={onViewCompany.bind(*/}
								{/*null,*/}
								{/*company.company.scoutId*/}
								{/*)}*/}
								{/*>*/}
								{/*Company Details*/}
								{/*</button>*/}
								{/*<button*/}
								{/*className={bem('action')}*/}
								{/*onClick={onViewLatestNews.bind(*/}
								{/*null,*/}
								{/*company.company.scoutId*/}
								{/*)}*/}
								{/*>*/}
								{/*Latest News*/}
								{/*</button>*/}
								<button
									className={bem('action')}
									onClick={onAddToTargetList.bind(
										null,
										company.company.scoutId
									)}
								>
									Add to Target List
								</button>
								<button
									className={bem('action')}
									onClick={onNavigateToCompanyPage.bind(
										null,
										company.company.scoutId
									)}
								>
									Go to Company Page
								</button>
								{parent ? (
									<button
										className={bem('action')}
										onClick={onNavigateToConnectionMap.bind(
											null,
											company.company.scoutId
										)}
									>
										Go to Connection Map
									</button>
								) : null}
							</div>
						) : null}
					</div>
				</div>
			</div>
		) : null;
	}
}