import React from 'react';
import PropTypes from 'prop-types';
import autobind from 'core-decorators/es/autobind';
import { graphql } from 'react-apollo';
import { Spinner } from '@blueprintjs/core';
import { getTeamResponses } from '../../../../graphql/response';
import ResponseUpload from './ResponseUpload';


const QueryGetTeamResponsesParams = 'responseType responseValue uploadDate uploadedBy checked responseValid pointsAwarded retry';

const QueryGetTeamResponsesOptions = {
	name: 'QueryGetTeamResponses',
	options: ({challengeKey, itemKey}) => {
		return {
			fetchPolicy: 'cache-and-network',
			variables: {challengeKey, itemKey}
		}
	}
};

@graphql(getTeamResponses(QueryGetTeamResponsesParams), QueryGetTeamResponsesOptions)
@autobind
class ChallengeResponse extends React.Component {
	static propTypes = {
		itemKey: PropTypes.string.isRequired,
		challengeKey: PropTypes.string.isRequired,
		responseType: PropTypes.oneOf([
			'upload', 'phrase'
		]).isRequired
	}

	render() {
		let { itemKey, challengeKey, responseType } = this.props;
		let { loading, getTeamResponses } = this.props.QueryGetTeamResponses;
		let classNames, title, text, canRespond;
		let response;

		// Create response element
		switch (responseType) {
			case 'upload': {
				response = <ResponseUpload itemKey={itemKey} challengeKey={challengeKey}/>;
				break;
			}
			case 'phrase': {

				break;
			}
		}

		if (!getTeamResponses) {
			if (loading) {
				// Query loading
				return (
					<div style={{textAlign:'center'}}>
						<Spinner/>
					</div>
				);
			}
		}
		else if (!getTeamResponses.length) {
			// No responses yet
			classNames = 'pt-callout pt-icon-inbox';
			text = 'Your team has not given a response yet.';
			canRespond = true;
		}
		else {
			// Responses found
			const latestResponse = getTeamResponses[0];

			if (latestResponse.checked) {
				if (latestResponse.responseValid) {
					// Response valid
					classNames = 'pt-callout pt-intent-success pt-icon-endorsed';
					title = 'Correct';
					text = `Well done! You team was awarded ${latestResponse.pointsAwarded} ${latestResponse.pointsAwarded===1?'point':'points'} for your efforts.`;
				}
				else {
					// Response invalid
					classNames = `pt-callout pt-icon-delete pt-intent-danger`;
					title = 'Incorrect';
					text = `Sorry, your team's response was not accepted. You ${latestResponse.retry?'may':'may not'} try again.`;
					canRespond = latestResponse.retry;
				}
			}
			else {
				// Response pending
				classNames = 'pt-callout pt-intent-warning pt-icon-time';
				title = 'Pending';
				text = `Your team's response is being verified. Check back in a few minutes!`;
			}
		}

		return (
			<div className='pt-card' style={{padding:'0.5rem'}}>
				<div className={classNames} style={{marginBottom:'0'}}>
					<h5>{title}</h5>
					{text}
					{canRespond?response:null}
				</div>
			</div>
		);
	}
}


export default ChallengeResponse;

@@ -164,16 +164,24 @@
  Spinner
+, Button
  %7D from 
@@ -984,16 +984,79 @@
 red%0A%09%7D%0A%0A
+%09refetch() %7B%0A%09%09this.props.QueryGetTeamResponses.refetch();%0A%09%7D%0A%0A
 %09render(
@@ -2803,16 +2803,57 @@
 '0.5rem'
+,marginTop:'-0.3rem',background:'#0d0d0c'
 %7D%7D%3E%0A%09%09%09%09
@@ -2904,24 +2904,215 @@
 ttom:'0'%7D%7D%3E%0A
+%09%09%09%09%09%3CButton iconName='refresh' loading=%7Bthis.props.QueryGetTeamResponses.loading%7D className='pt-minimal' %0A%09%09%09%09%09%09style=%7B%7Bfloat:'right',margin:'-0.6rem',padding:'0'%7D%7D onClick=%7Bthis.refetch%7D/%3E%0A
 %09%09%09%09%09%3Ch5%3E%7Bti

Add response refresh button