import React, { PureComponent } from 'react';
import { Item, Icon } from 'semantic-ui-react';
import { Link } from 'gatsby';

import Layout from '../components/layout';

type CollectionsPageProps = {};

type CollectionsPageState = {
	collections?: any;
	allcrew?: any;
};

class CollectionsPage extends PureComponent<CollectionsPageProps, CollectionsPageState> {
	state = { collections: undefined, allcrew: undefined };

	componentDidMount() {
		fetch('/structured/crew.json')
			.then(response => response.json())
			.then(allcrew => {
				fetch('/structured/collections.json')
					.then(response => response.json())
					.then(collections => {
						this.setState({ allcrew, collections });
					});
			});
	}

	render() {
		const { collections, allcrew } = this.state;
		if (!collections || collections.length === 0) {
			return (
				<Layout title='Collections'>
					<Icon loading name='spinner' /> Loading...
				</Layout>
			);
		}

		return (
			<Layout title='Collections'>
				<Item.Group>
					{collections.map(collection => (
						<Item key={collection.name} id={encodeURIComponent(collection.name)}>
							<Item.Image size='medium' src={`${process.env.GATSBY_ASSETS_URL}${collection.image}`} />

							<Item.Content>
								<Item.Header>{collection.name}</Item.Header>
								<Item.Meta>
									<span dangerouslySetInnerHTML={{ __html: collection.description }} />
								</Item.Meta>
								<Item.Description>
									<b>Crew: </b>
									{collection.crew
										.map(crew => (
											<Link key={crew} to={`/crew/${crew}/`}>
												{allcrew.find(c => c.symbol === crew).name}
											</Link>
										))
										.reduce((prev, curr) => [prev, ', ', curr])}
								</Item.Description>
							</Item.Content>
						</Item>
					))}
				</Item.Group>
			</Layout>
		);
	}
}

export default CollectionsPage;