// @flow

import React, { Component } from 'react';
import SwipeableViews from 'react-swipeable-views';

import { Tab, Tabs } from 'material-ui/Tabs';

import Shelf from './Shelf';

import type { BookType } from '../common/flowTypes';
import getWidth, { widths } from '../utils/getWidth';

export class Home extends Component {
	props: {
		books: Array<BookType>,
		shelves: Array<string>,
		filterQuery: string,
		clearQuery: () => void,
		handleShelfUpdate: (BookType, string) => void,
		findShelf: string => string
	};

	state = {
		slideIndex: 0
	};

	handleTabChange = (value: number) => {
		this.setState({
			slideIndex: value
		});
	};

	render() {
		const {
			books,
			shelves,
			filterQuery,
			clearQuery,
			handleShelfUpdate,
			findShelf
		} = this.props;

		const wide = getWidth() === widths.large;

		const shelfText = {
			read: {
				narrow: 'Read',
				wide: 'Read'
			},
			wantToRead: {
				narrow: 'Want',
				wide: 'Want to Read'
			},
			currentlyReading: {
				narrow: 'Current',
				wide: 'Currently Reading'
			}
		};

		const shelvedBooks = shelves.reduce((map, shelf) => {
			map[shelf] = books.filter(book => book.shelf === shelf);
			return map;
		}, {});

		const shelfTabs = shelves.map(shelf => {
			return (
				<Tab
					key={shelf + '-tab'}
					label={wide ? shelfText[shelf].wide : shelfText[shelf].narrow}
					value={shelves.indexOf(shelf)}
				/>
			);
		});

		const showingShelves = shelves.map(shelf => {
			return (
				<Shelf
					key={shelf + '-id'}
					title={shelf}
					books={shelvedBooks[shelf]}
					filterQuery={filterQuery}
					clearQuery={clearQuery}
					handleShelfUpdate={handleShelfUpdate}
					findShelf={findShelf}
				/>
			);
		});

		return (
			<div className="home">
				<Tabs
					className="shelf-tabs"
					onChange={this.handleTabChange}
					value={this.state.slideIndex}
				>
					{shelfTabs}
				</Tabs>
				<SwipeableViews
					index={this.state.slideIndex}
					onChangeIndex={this.handleTabChange}
					animateHeight={true}
				>
					{showingShelves}
				</SwipeableViews>
			</div>
		);
	}
}

export default Home;

@@ -3,16 +3,26 @@
  @flow%0A%0A
+// Vendor%0A
 import R
@@ -104,24 +104,50 @@
 le-views';%0A%0A
+// Material-UI components%0A
 import %7B Tab
@@ -177,24 +177,38 @@
 -ui/Tabs';%0A%0A
+// Components%0A
 import Shelf
@@ -225,16 +225,32 @@
 helf';%0A%0A
+// Utils/Common%0A
 import t
@@ -353,57 +353,236 @@
 ';%0A%0A
-export class Home extends Component %7B%0A%09p
+/* ------------------------------------------------------------------%0A   --------------------------- COMPONENT ----------------------------%0A%09 ------------------------------------------------------------------ */%0A%0Atype P
 rops
-:
+ =
  %7B%0A
-%09
 %09boo
@@ -607,34 +607,32 @@
 %3E,%0A%09
-%09shelves: Array%3Cstring%3E
+clearQuery: () =%3E void
 ,%0A
-%09
 %09fil
@@ -654,34 +654,37 @@
 g,%0A%09
-%09clearQuery: () =%3E void
+findShelf: string =%3E string
 ,%0A
-%09
 %09han
@@ -732,73 +732,728 @@
 d,%0A%09
-%09findShelf: string =%3E string%0A%09%7D;%0A%0A%09state = %7B%0A%09%09slideIndex: 0%0A%09%7D;%0A
+shelves: Array%3Cstring%3E%0A%7D;%0A%0A/**%0A * Home page component, located at route /shelves%0A * @param %7BArray%3CBookType%3E%7D books  the array of all Books the user has%0A * @param %7BArray%3Cstring%3E%7D shelves%09%09the array of all bookshelves%0A * @param %7Bstring%7D filterQuery %09%09the query to filter all displaying books by%0A * @param %7Bfunction()%7D clearQuery  from %7B@link App#clearQuery%7D%0A * @param %7Bfunction(string, string)%7D handleShelfUpdate from %7B@link App#handleShelfUpdate%7D%0A * @param %7Bfunction(string)%7D findShelf from %7B@link App#findShelf%7D%0A */%0Aexport class Home extends Component %7B%0A%09props: Props;%0A%0A%09state = %7B%0A%09%09slideIndex: 0%0A%09%7D;%0A%0A%09/**%0A%09 * Controller for SwipeableViews tabs component%0A%09 * @param  %7Bnumber%7D value The number of the tab to display%0A%09 */
 %0A%09ha

add jsdoc to Home