import React from 'react';
import autobind from 'core-decorators/es/autobind';
import { Link } from 'react-router-dom';
import { graphql } from 'react-apollo';
import { Button } from '@blueprintjs/core';
import { getArticles } from '../../../../graphql/article';
import LoadingSpinner from '../../../components/LoadingSpinner';
import InstructionCollapse from './InstructionCollapse';

import '../../scss/views/_main.scss'
import '../../scss/views/_instructions.scss';


const QueryGetArticlesOptions = {
	name: 'QueryGetArticles',
	options: {
		fetchPolicy: 'cache-and-network',
		variables: { category: 'instructions' }
	}
}

@graphql(getArticles('_id title content'), QueryGetArticlesOptions)
@autobind
class Instructions extends React.Component {
	state = {
		showHelp: false
	}

	toggleShowHelp() {
		this.setState((prevState) => {
			return { showHelp: !prevState.showHelp };
		});
	}

	render() {
		return (
			<main id='instructions' className='dashboard'>
				<div className='content'>
					<h2>
						Instructions
						<Button className='helper-button pt-small pt-minimal pt-intent-primary' iconName='help' onClick={this.toggleShowHelp}/>
					</h2>
					{ this.state.showHelp ? 
						<div className='pt-callout pt-icon-help pt-intent-primary'>
							This page contains general information and instructions for the events on the day. 
							For challenge specific instructions, please go to the <Link to='/dashboard/challenges'>challenges</Link> page. 
						</div>
						: null
					}
					{ this.props.QueryGetArticles.getArticles ? 
						this.props.QueryGetArticles.getArticles.map((article) => {
							return <InstructionCollapse key={article._id} article={article}/>;
						})
						: <LoadingSpinner/>
					}
				</div>
			</main>
		);
	}
}


export default Instructions;

@@ -168,16 +168,31 @@
 %7B Button
+, NonIdealState
  %7D from 
@@ -208,24 +208,24 @@
 ntjs/core';%0A
-
 import %7B get
@@ -912,16 +912,576 @@
 der() %7B%0A
+%09%09const %7B loading, getArticles %7D = this.props.QueryGetArticles;%0A%09%09let content;%0A%0A%09%09if (getArticles) %7B%0A%09%09%09if (getArticles.length) %7B%0A%09%09%09%09content = (%0A%09%09%09%09%09%3Cdiv%3E%0A%09%09%09%09%09%09%7BgetArticles.map((article) =%3E %7B%0A%09%09%09%09%09%09%09return %3CInstructionCollapse key=%7Barticle._id%7D article=%7Barticle%7D/%3E;%0A%09%09%09%09%09%09%7D)%7D%0A%09%09%09%09%09%3C/div%3E%0A%09%09%09%09);%0A%09%09%09%7D%0A%09%09%09else %7B%0A%09%09%09%09content = (%0A%09%09%09%09%09%3Cdiv style=%7B%7Bmargin:'3rem 0'%7D%7D%3E%0A%09%09%09%09%09%09%3CNonIdealState title='No instructions found' description=%7B%60You'll be alright.%60%7D visual='clipboard'/%3E%0A%09%09%09%09%09%3C/div%3E%0A%09%09%09%09);%0A%09%09%09%7D%0A%09%09%7D%0A%09%09else if (loading) %7B%0A%09%09%09content = %3CLoadingSpinner/%3E;%0A%09%09%7D%0A%0A
 %09%09return
@@ -2078,231 +2078,15 @@
 %09%09%09%7B
- this.props.QueryGetArticles.getArticles ? %0A%09%09%09%09%09%09this.props.QueryGetArticles.getArticles.map((article) =%3E %7B%0A%09%09%09%09%09%09%09return %3CInstructionCollapse key=%7Barticle._id%7D article=%7Barticle%7D/%3E;%0A%09%09%09%09%09%09%7D)%0A%09%09%09%09%09%09: %3CLoadingSpinner/%3E%0A%09%09%09%09%09
+content
 %7D%0A%09%09

Add no instructions screen