import React, { Component } from 'react';
import Categories from './Categories';
import Category from './Category';
import Tool from './Tool';
import { Container, Dimmer, Dropdown, Header, Icon, Item, Loader, Menu, Segment, Input } from 'semantic-ui-react';
import { Link, Route } from 'react-router-dom';

class App extends Component {
	constructor() {
		super();

		this.state = {
			toolData: null,
		};
	}

	componentDidMount() {
		fetch('http://localhost:8080/api/client')
			.then(response => response.json())
			.then(data => this.setState({ toolData: data }));
	}

	render() {
		const toolData = this.state.toolData;

		return (
			<div>
				<Menu fixed='top' borderless inverted>
					<Menu.Item>
						<Icon name='bars' size='big' />
					</Menu.Item>
					<Menu.Item as={Link} to='/'>
						<Icon name='home' size='big' />
					</Menu.Item>
					<Menu.Menu position='right'>
						<Menu.Item position='right'>
							<Input transparent inverted placeholder='Search...' icon='search' />
						</Menu.Item>
					</Menu.Menu>
				</Menu>
				<div style={{height: '70px', display: 'inline-block'}} />


				{toolData ?
					<div>
						<Route exact path='/' render={props =>
							<Categories {...props} data={toolData} />
						} />

						<Route exact path='/:category' render={props =>
							<Category {...props} data={toolData} />
						} />

						<Route exact path='/:category/:id' render={props =>
							<Tool {...props} data={toolData} />
						} />
					</div>
				:
					<Dimmer active>
						<Loader>Loading</Loader>
					</Dimmer>
				}

			</div>
		);
	}
}

export default App;