import React from 'react';
import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar';
import VideoPlayer from './VideoPlayer';
import VideoInfo from './VideoInfo';
import VideoList from './VideoList';
import Suggestion from './areainfo/Suggestion';
import { ReactHeight } from 'react-height';
import './css/App.css';


class App extends React.Component {
	state = {
		playerHeight: null,
		navHeight: null,
		blackbgHeight: null,
		isInfoToggled: false,
		videoId: localStorage['lastId']?localStorage['lastId']:'0J2QdDbelmY'
	};

// componentDidMount(){

// }

// componentDidUpdate(prevProps, prevState) {
	
// }

static getDerivedStateFromProps(nextProps, prevState) {
	let idMatch = matchPath(nextProps.location.pathname, {
		path: "/video/:id",
		exact: true,
		strict: false
	});
	if(idMatch && idMatch.params.id !== prevState.videoId){ 
		localStorage.setItem('lastId', idMatch.params.id)
		return {videoId: idMatch.params.id }; 
		}
	return null;
}


	render() {
		return (
			<React.Fragment>
				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
					<TopBar />
				</ReactHeight>
				<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
					<Col
						xs="12"
						lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
						className="align-content-center pt-2 p-1 pr-2">
						<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
							<VideoPlayer videoId={this.state.videoId}/>
						</ReactHeight>
					</Col>
					<Col
						xs="12"
						lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
						className="p-0 p-sm-0"
						style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
						<div class="d-flex justify-content-center">
							<Button
								variant="outline-light"
								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
								className="pt-1 "
								aria-controls="infovideo-collapse"
								aria-expanded={this.state.isInfoToggled}>
								{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
							</Button>
						</div>
						<Collapse in={this.state.isInfoToggled}>
							<div className="pt-1" id="infovideo-collapse">
								<VideoInfo videoId={this.state.videoId} />
							</div>
						</Collapse>
					</Col>
				</ReactHeight>
				<Row style={{ "max-height": `calc(98vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
					<Switch>
						<Route exact path='/' component={VideoList} />
						<Route path={["/video/:id", "/search/:query"]} component={Suggestion} />
						<Route render={() => <div>URL not found</div>} />
					</Switch>
				</Row>
			</React.Fragment>
		);
	}
}

export default withRouter(App);