import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Numbro from '../Numbro';
import Tooltip from '../Tooltip';

import * as styles from './Style.less';

export default class RiskProfile extends Component {
	static propTypes = {
		data: PropTypes.object.isRequired,
		teamData: PropTypes.oneOfType([ // eslint-disable-line react/no-unused-prop-types
			PropTypes.array,
			PropTypes.object
		]),
		teamIssues: PropTypes.oneOfType([
			PropTypes.array,
			PropTypes.bool
		])
	};

	static defaultProps = {
		teamData: [],
		teamIssues: false
	};

	static generateRiskProfileIssue(props) {
		const teams = props.data.teams.filter(team => team.cause); // Find teams causing risk
		let longpole = 0;
		const commitments = [];

		if (props.data.due_date_months > longpole) {
			longpole = props.data.due_date_months;
		}

		if (props.data.estimated_work_months > longpole) {
			longpole = props.data.estimated_work_months;
		}

		teams.forEach((r) => {
			const team = props.teamData.find(t => t.id === r.id);

			commitments.push({
				title: team.name,
				time: team.work_months
			});

			if (team.work_months > longpole) {
				longpole = team.work_months;
			}
		});

		const newCommitments = commitments.map((r) => {
			return Object.assign({
				width: (r.time / longpole) * 100,
				status: null
			}, r);
		});

		return {
			longpole,
			commitments: newCommitments
		};
	}

	static generateRiskProfileTeam(props) {
		const teamIssueWork = props.data.teams.find(o => o.id === props.teamData.id);
		let longpole = 0;
		const commitments = [];

		if (props.data.due_date_months > longpole) {
			longpole = props.data.due_date_months;
		}

		if (props.data.estimated_work_months > longpole) {
			longpole = props.data.estimated_work_months;
		}

		if (teamIssueWork.issue_work_months > longpole) {
			longpole = teamIssueWork.issue_work_months;
		}

		if (props.teamData.work_months > longpole) {
			longpole = props.teamData.work_months;
		}

		commitments.push({
			title: 'This Issue',
			time: teamIssueWork.issue_work_months,
			status: (teamIssueWork.issue_work_months >= props.data.due_date_months) ? 'atRisk' : 'noRisk'
		});

		commitments.push({
			title: `${props.teamData.name} Total`,
			time: props.teamData.work_months,
			status: null
		});

		const newCommitments = commitments.map((r) => {
			return Object.assign({
				width: (r.time / longpole) * 100
			}, r);
		});

		return {
			longpole,
			commitments: newCommitments
		};
	}

	constructor(props) {
		super(props);

		const {
			longpole,
			commitments
		} = this.generateRiskProfile(props);

		this.state = {
			forecast: {
				time: props.data.estimated_work_months,
				width: (props.data.estimated_work_months / longpole) * 100,
				status: (props.data.estimated_work_months >= props.data.due_date_months) ? 'atRisk' : 'noRisk'
			},
			dueDate: {
				width: (props.data.due_date_months / longpole) * 100
			},
			commitments: commitments.sort((a, b) => a.time - b.time)
		};
	}

	componentWillReceiveProps(nextProps) {
		const {
			longpole,
			commitments
		} = this.generateRiskProfile(nextProps);

		this.setState({
			forecast: {
				time: nextProps.data.estimated_work_months,
				width: (nextProps.data.estimated_work_months / longpole) * 100,
				status: (nextProps.data.estimated_work_months >= nextProps.data.due_date_months) ? 'atRisk' : 'noRisk'
			},
			dueDate: {
				width: (nextProps.data.due_date_months / longpole) * 100
			},
			commitments: commitments.sort((a, b) => a.time - b.time)
		});
	}

	generateRiskProfile(props) {
		if (this.props.teamIssues) {
			return RiskProfile.generateRiskProfileTeam(props);
		}

		return RiskProfile.generateRiskProfileIssue(props);
	}

	render() {
		return (
			<div
				className={styles.RiskProfile}
			>
				<div className={styles.Titles}>
					<div>Forecast Work Months</div>
					<div className={styles.Heading}>Team Commitments</div>
					{
						this.state.commitments.map((r) => {
							return (
								<div key={`Title${r.title}`}>
									{r.title}
								</div>
							);
						})
					}
				</div>
				<div className={styles.Times}>
					<div>
						{Numbro.format(this.state.forecast.time, '0.00')}
					</div>
					<div />
					{
						this.state.commitments.map((r) => {
							return (
								<div key={`Time${r.title}`}>
									{Numbro.format(r.time, '0.00')}
								</div>
							);
						})
					}
				</div>
				<div className={styles.Visuals}>
					<div
						style={{ width: `${this.state.dueDate.width}%` }}
						className={styles.DueDate}
					>
						<span>
							Due Date
						</span>
					</div>
					<div className={styles.Bars}>
						<div
							style={{ width: `${this.state.forecast.width}%` }}
							className={this.state.forecast.status}
						/>
						<div />
						{
							this.state.commitments.map((r) => {
								return this.props.teamIssues ? (
									<div
										key={`Bar${r.title}`}
										style={{ width: `${r.width}%` }}
										className={r.status}
									/>
								) : (
									<Tooltip
										header={`${r.title} has ${Numbro.format(r.time, '0.00')} total months of forecast work`}
										position="right center"
										key={`Bar${r.title}`}
									>
										<div
											style={{ width: `${r.width}%` }}
											className={r.status}
										/>
									</Tooltip>
								);
							})
						}
					</div>
				</div>
			</div>
		);
	}
}
