import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Table as SemanticTable
} from 'semantic-ui-react';
import ChangePill from '../ChangePill';
import Numbro from '../Numbro';

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

export default class SignalList extends Component {
	static propTypes = {
		title: PropTypes.string.isRequired,
		signals: PropTypes.array.isRequired
	};

	createSignals() {
		const rows = [];

		this.props.signals.forEach((signal) => {
			const label = signal.signal.Tooltip(<span>{signal.signal.Label}</span>);

			const link = React.cloneElement(
				signal.link,
				null,
				label
			);

			rows.push(
				<SemanticTable.Row
					key={signal.key}
					className={styles.Row}
				>
					<SemanticTable.Cell
						className="title"
					>
						{link}
					</SemanticTable.Cell>
					<SemanticTable.Cell
						className="value"
						textAlign="right"
						collapsing
					>
						{Numbro.format(signal.value, signal.signal.Format)}
					</SemanticTable.Cell>
					<SemanticTable.Cell
						className="change"
						textAlign="right"
						collapsing
					>
						<ChangePill
							value={signal.change}
							format={signal.signal.Format}
							positive={signal.signal.Positive}
						/>
					</SemanticTable.Cell>
					{
						signal.sparkline && (
							<SemanticTable.Cell
								className="sparkline"
								textAlign="right"
								collapsing
							>
								{signal.sparkline}
							</SemanticTable.Cell>
						)
					}
				</SemanticTable.Row>
			);
		});

		return rows;
	}

	render() {
		const rows = this.createSignals();

		return (
			<>
				<h1 className={styles.Heading}>
					{this.props.title}
				</h1>
				<SemanticTable
					basic="very"
					striped
					className={styles.SignalList}
				>
					<SemanticTable.Body>
						{rows}
					</SemanticTable.Body>
				</SemanticTable>
			</>
		);
	}
}
