import React, {Component} from 'react';
import '../../App.css';
import './eLogBookTable.css';
import ELogBookService from '../../services/eLogBookService';
import {Table} from 'antd';
import ReactFitText from 'react-fittext';
import {ContextMenu, ContextMenuTrigger, MenuItem} from 'react-contextmenu';
import Tooltip from 'rc-tooltip/es/Tooltip';
import 'rc-tooltip/assets/bootstrap.css';

export default class ELogBookTable extends Component {
	constructor(props) {
		super(props);
		this.state = {logs: []};
		this.numberOfSquareColumns = this.getNumberOfSquares(this.props.acc);
		this.columns = this.getTableColumns();
		const eLogBookService = new ELogBookService();

		eLogBookService.getLogbookEvents(props.acc).then(logs => {
			// TODO fix web service send error message
			// this is just to make the mockup
			logs.map((log) => {
				let n = log.id === 50 ? 2 : log.id === 60 ? 1 : 8;
				let index = 0;
				for (let i = 0; i < n; i++) {
					log['r' + ++index] = Math.random();
					console.log(log['r' + index]);
				}
			});
			console.log(logs);
			this.setState({logs: logs});
		}
		);
		//Comming from a predifined list maybe?
		this.elogbookList = {
			'Open Elogbook': 'http://elogbook.cern.ch/eLogbook/eLogbook.jsp?lgbk=' + (props.acc === 'lhc' ? 60 : props.acc === 'cps' ? 10 : 50) + '',
			'LHC morning meetings': 'https://indico.cern.ch/category/6386/',
			'Accelerator Performance and Statistics': 'https://acc-stats.web.cern.ch/acc-stats/#lhc/overview-panel',
			'Accelerator Fault Tracking': 'https://aft.cern.ch',
			'Weekly and Shutdown Reports': 'https://espace.cern.ch/be-dep-workspace/op/_layouts/15/start.aspx#/Weekly%20Reports/Forms/AllItems.aspx'
		};

		this.menuItems = [];
		for (let e in this.elogbookList) {
			console.log(`${this.elogbookList[e]}`);
			this.menuItems.push(<MenuItem onClick={() => window.open(this.elogbookList[e])} key={e}>{e}</MenuItem>);
			/*window.location.assign(this.elogbookList[e])}*/
		}
	}

	getNumberOfSquares(acc) {
		return acc === 'lhc' ? 1 : acc === 'sps' ? 2 : 8;
	}

	getTableColumns() {
		const columns = [

			{
				title: 'ID',
				dataIndex: 'id',
				key: 'id',
				width: '2%',
				render: (value) => {
					return {
						props: {
							className: 'idField'
						},
						children: value
					};
				}
			},
			{
				title: 'Time',
				dataIndex: 'date',
				key: 'date',
				width: '3%',
				render: (value) => {
					let val = value.split(':');
					let child = val[0] + ':' + val[1];
					const obj = {
						children: child,
						props: {
							className: 'timeField'
						},
					};
					return obj;
				}
			}];

		if (this.numberOfSquareColumns === 1) {
			columns.push({
				title: 'R1',
				dataIndex: 'r1',
				key: 'r1',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'r1 colored' : 'greenSquare' // there it is!
						},
						children: <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={value < 0.5 ?
								<div><p><b>PROTONPHY:</b> SETUP</p><p><b>LSA:</b> NOT DEFINED</p>
								</div> :
								<div><p><b>PROTONPHY:</b> STABLE BEAMS</p><p><b>LSA:</b> NOT DEFINED
								</p></div>}>
							<div>&nbsp;</div>
						</Tooltip></div>
					};
				}
			});
		} else if (this.numberOfSquareColumns === 2) {
			columns.push({
				title: 'R1',
				dataIndex: 'r1',
				key: 'r1',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0.1}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>SFTPRO2</b></p><p
								className="toolTipTitle"><b>Fault: 1</b></p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			// columns.push({
			//     title: 'R2',
			//     dataIndex: 'r2',
			//     key: 'r2',
			//     width: '3%',
			//     render: (value) => {
			//         return {
			//             props: {
			//                 className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
			//             },
			//             children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
			//                 overlay={<div><p className="toolTipTitle"><b>Fault: 1</b>
			//                 </p>
			//                 <p><b>Group:</b> Downtime, to be update</p>
			//                 <p><b>Faultname:</b> VOID</p>
			//                 <p>Element: NOT SPECIFIED</p>
			//                 <p>...</p>
			//                 </div>}>
			//                 <div>&nbsp;</div>
			//             </Tooltip></div> :
			//                 <div>&nbsp;</div>
			//         };
			//     }
			// });
		} else {
			columns.push({
				title: 'R1',
				dataIndex: 'r1',
				key: 'r1',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>AD</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			columns.push({
				title: 'R2',
				dataIndex: 'r2',
				key: 'r2',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>EAST1</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			columns.push({
				title: 'R3',
				dataIndex: 'r3',
				key: 'r3',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>EAST2</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			columns.push({
				title: 'R4',
				dataIndex: 'r4',
				key: 'r4',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>LHC4</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			columns.push({
				title: 'R5',
				dataIndex: 'r5',
				key: 'r5',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>SFTPRO1</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			columns.push({
				title: 'R6',
				dataIndex: 'r6',
				key: 'r6',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>TOF</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			columns.push({
				title: 'R7',
				dataIndex: 'r7',
				key: 'r7',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>COLUMN1</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
			columns.push({
				title: 'R8',
				dataIndex: 'r8',
				key: 'r8',
				width: '3%',
				render: (value) => {
					return {
						props: {
							className: value < 0.5 ? 'redSquare' : 'greenSquare' // there it is!
						},
						children: value < 0.5 ? <div><Tooltip placement="top" mouseLeaveDelay={0}
							overlay={<div className="tooltipDiv"><p
								className="toolTipColumn"><b>COLUMN2</b></p><p
								className="toolTipTitle"><b>Fault: 1</b>
							</p>
							<p><b>Group:</b> Downtime, to be update</p>
							<p><b>Faultname:</b> VOID</p>
							<p>Element: NOT SPECIFIED</p>
							<p>...</p>
							</div>}>
							<div>&nbsp;</div>
						</Tooltip></div> :
							<div>&nbsp;</div>
					};
				}
			});
		}
		columns.push({
			title: 'Comments',
			dataIndex: 'comment',
			key: 'comment', /*
        width: '70%',*/
			render: (comment, log) =>
				<div>
					{/*<Tooltip placement="topLeft" overlayClassName="commentToolTip" overlayStyle=title={log.comment} arrowPointAtCenter>*/}
					{/*<p className="comments">{log.comment}</p>*/}
					{/*</Tooltip>*/}
					<Tooltip placement="top" mouseLeaveDelay="0" overlay={`${comment}`}>
						<p className="comments">{log.comment}</p>
					</Tooltip>
					{/*<p className="comments" data-tip={`<p className="popUpComment">${log.comment}</p>`} data-for="comment-tooltip">{log.comment}</p>*/}
					{/*<ReactTooltip id="comment-tooltip" className="commentToolTip" html={true} place="left" type="light" effect="solid" offset={{top: 40}}>*/}
					{/*</ReactTooltip>*/}
				</div>
		});
		return columns;
	}


	render() {
		const logs = this.state.logs;
		// const divStyle = {
		//     left: window.width - ,
		// };

		if (logs) {
			for (let [i, v] of logs.entries()) {
				v.key = ++i;
			}
		}


		return (
			<div>
				<ReactFitText compressor={4} maxFontSize={12} minFontSize={8}>
					<ContextMenuTrigger id="MENUELOGBOOK" holdToDisplay={1000}>
						<Table
							columns={this.columns}
							bordered
							title={() => 'ELOGBOOK - ' + new Date().toLocaleString()}
							dataSource={logs}
							size="middle"
							scroll={{y: ( this.props.height * .84 )}}
							showHeader={false}
							pagination={false}
							// pagination={{pageSize: 10}}
						/>
					</ContextMenuTrigger>
				</ReactFitText>
				<ContextMenu id="MENUELOGBOOK" className="react-contextmenu">

					{this.menuItems}

				</ContextMenu>


			</div>


		);

	}
}