/**
 * Item View
 *
 * This is the item view, it is rendered when users visit a page of a specific
 * item. This mainly renders the form to edit the item content in.
 */

import React from 'react';
import ReactDOM from 'react-dom';
import Lists from '../stores/Lists';
import CreateForm from '../components/Forms/CreateForm';
import EditForm from '../components/Forms/EditForm';
import EditFormHeader from '../components/Forms/EditFormHeader';
import FlashMessages from '../components/FlashMessages';
import Footer from '../components/Footer';
import MobileNavigation from '../components/Navigation/MobileNavigation';
import PrimaryNavigation from '../components/Navigation/PrimaryNavigation';
import RelatedItemsList from '../components/RelatedItemsList';
import SecondaryNavigation from '../components/Navigation/SecondaryNavigation';
import { Container, Spinner } from 'elemental';

var ItemView = React.createClass({
	displayName: 'ItemView',
	contextTypes: {
		router: React.PropTypes.object.isRequired,
	},
	getInitialState () {
		return {
			itemData: null,
			createIsOpen: false,
		};
	},
	// When we are mounted, start loading the data
	componentDidMount () {
		this.loadItemData();
	},
	// Load the data
	loadItemData () {
		Lists[this.props.params.listId].loadItem(this.props.params.itemId, { drilldown: true }, (err, itemData) => {
			if (err || !itemData) {
				// TODO: nicer error handling
				console.log('Error loading item data', err);
				alert('Error loading data (details logged to console)');
				return;
			}
			this.setState({ itemData });
		});
	},
	onCreate (item) {
		let list = Lists[this.props.params.listId];
		// After we've created a new item, redirect to newly created item path
		// TODO FIX THIS SO IT DOESNT THROW AN ERROR
		this.context.router.push(`${Keystone.adminPath}/${list.path}/${item.id}`);
	},
	// Open and close the create new item modal
	toggleCreate (visible) {
		this.setState({
			createIsOpen: visible,
		});
	},
	// TODO FIX THIS
	renderRelationships () {
		const { relationships } = Lists[this.props.params.listId];
		const keys = Object.keys(relationships);
		if (!keys.length) return;
		return (
			<div>
				<h2>Relationships</h2>
				{keys.map(key => {
					const relationship = relationships[key];
					const refList = Lists[relationship.ref];
					return <RelatedItemsList key={relationship.path} list={Lists[this.props.params.listId]} refList={refList} relatedItemId={this.props.params.itemId} relationship={relationship} />;
				})}
			</div>
		);
	},
	render () {
		// If we don't have any data yet, show the loading indicator
		if (!this.state.itemData) {
			return (
				<div className="view-loading-indicator">
					<Spinner size="md" />
				</div>
			);
		}
		// When we have the data, render the item view with it
		return (
			<div>
				<EditFormHeader
					list={Lists[this.props.params.listId]}
					data={this.state.itemData}
					drilldown={this.state.itemDrilldown}
					toggleCreate={this.toggleCreate} />
				<Container>
					<CreateForm
						list={Lists[this.props.params.listId]}
						isOpen={this.state.createIsOpen}
						onCancel={() => this.toggleCreate(false)}
						onCreate={(item) => this.onCreate(item)} />
					<FlashMessages
						messages={Keystone.messages} />
					<EditForm
						list={Lists[this.props.params.listId]}
						data={this.state.itemData} />
					{this.renderRelationships()}
				</Container>
			</div>
		);
	},
});

module.exports = ItemView;

@@ -1963,26 +1963,8 @@
 %09%7D,%0A
-%09// TODO FIX THIS%0A
 %09ren
@@ -2273,19 +2273,20 @@
 ionship.
-ref
+path
 %5D;%0A%09%09%09%09%09
@@ -2292,16 +2292,24 @@
 %09return 
+(%0A%09%09%09%09%09%09
 %3CRelated
@@ -2317,17 +2317,24 @@
 temsList
- 
+%0A%09%09%09%09%09%09%09
 key=%7Brel
@@ -2348,17 +2348,24 @@
 ip.path%7D
- 
+%0A%09%09%09%09%09%09%09
 list=%7BLi
@@ -2394,17 +2394,24 @@
 listId%5D%7D
- 
+%0A%09%09%09%09%09%09%09
 refList=
@@ -2419,17 +2419,24 @@
 refList%7D
- 
+%0A%09%09%09%09%09%09%09
 relatedI
@@ -2467,17 +2467,24 @@
 .itemId%7D
- 
+%0A%09%09%09%09%09%09%09
 relation
@@ -2502,19 +2502,32 @@
 ionship%7D
- /%3E
+%0A%09%09%09%09%09%09/%3E%0A%09%09%09%09%09)
 ;%0A%09%09%09%09%7D)

Fix relationship