import React from 'react';
import { connect } from 'react-redux';
import withSiteIdRouter from 'HOCs/withSiteIdRouter';
import { errors as errorsRoute, error as errorRoute } from 'App/routes';
import { NoContent , Loader, IconButton, Icon, Popup, BackLink, } from 'UI';
import { fetch, fetchTrace } from 'Duck/errors';
import MainSection from './MainSection';
import SideSection from './SideSection';
import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';

@connect(state =>({
	errorIdInStore: state.getIn(["errors", "instance"]).errorId,
	loading: state.getIn([ "errors", "fetch", "loading" ]) || state.getIn([ "errors", "fetchTrace", "loading" ]),
	errorOnFetch: state.getIn(["errors", "fetch", "errors"]) || state.getIn([ "errors", "fetchTrace", "errors" ]),
}), {
	fetch,
	fetchTrace,
})
@withSiteIdRouter
export default class ErrorInfo extends React.PureComponent {
	ensureInstance() {
		const { errorId, loading, errorOnFetch } = this.props;
		if (!loading && 
				this.props.errorIdInStore !== errorId && 
				errorId != null) {
			this.props.fetch(errorId);
			this.props.fetchTrace(errorId)
		}
	}
	componentDidMount() {
		this.ensureInstance();
	}
	componentDidUpdate() {
		this.ensureInstance();
	}
	next = () => {
		const { list, errorId } = this.props;
		const curIndex = list.findIndex(e => e.errorId === errorId);
		const next = list.get(curIndex + 1);
		if (next != null) {
			this.props.history.push(errorRoute(next.errorId))
		}
	}
	prev = () => {
		const { list, errorId } = this.props;
		const curIndex = list.findIndex(e => e.errorId === errorId);
		const prev = list.get(curIndex - 1);
		if (prev != null) {
			this.props.history.push(errorRoute(prev.errorId))
		}
		
	}
	render() {
		const { 
			loading,
			errorIdInStore,
			list,
			errorId,
		} = this.props;

		let nextDisabled = true,
				prevDisabled = true;
		if (list.size > 0) {
			nextDisabled = loading || list.last().errorId === errorId;
			prevDisabled = loading || list.first().errorId === errorId;
		}

		return (
			<NoContent
				title={
					<div className="flex flex-col items-center justify-center">
						<AnimatedSVG name={ICONS.EMPTY_STATE} size="170" />
						<div className="mt-6 text-2xl">No Error Found!</div>
					</div>
				}
				subtext="Please try to find existing one."
				// animatedIcon="no-results"
				show={ !loading && errorIdInStore == null }
			>
				{/* <div className="w-9/12 mb-4 flex justify-between">
					<BackLink	to={ errorsRoute() } label="Back" />
					<div />
					<div className="flex items-center">
						<Popup
							pinned
							content="Prev Error"
						>
							<IconButton
								outline
								compact
								size="small"
								icon="prev1"
								disabled={ prevDisabled }
								onClick={this.prev}
							/>
						</Popup>
						<div className="mr-3" />

						<Popup
							pinned
							content="Next Error"
						>
							<IconButton
								outline
								compact
								size="small"
								icon="next1"
								disabled={ nextDisabled }
								onClick={this.next}
							/>
						</Popup>
					</div>
				</div> */}
				<div className="flex" >
						<Loader loading={ loading } className="w-9/12">
							<MainSection className="w-9/12" />
							<SideSection className="w-3/12" />
						</Loader>
				</div>
			</NoContent>
		);
	}
}