import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';

import Header from '../Header/Header';
import MeetingsList from './MeetingsList';

export default class Look extends Component {
  state = {
    scrolled: false,
    meetings: []
  }

  static contextTypes = {
    userId: PropTypes.string.isRequired
  };

  componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll);
    const { roomId } = this.props.location;
    const { userId } = this.context;

    const baseUrl = 'http://localhost:8008/api/meetings';
    const queryUrl = roomId ? `room/${roomId}` : `user/${userId}`;

    axios.get(`${baseUrl}/${queryUrl}`)
         .then(res => this.setState({ meetings: res.data }));

  }

  componentWillUnmount = () => { window.removeEventListener('scroll', this.handleScroll); }

  handleScroll = (event) => {
    let top = event.srcElement.body.scrollTop;

    //room-photo height (200px) - header (50px)
    if(top > 150) { if(!this.state.scrolled) this.setState({scrolled: true}); }
    else { if(this.state.scrolled) this.setState({scrolled: false}); }

  }

  toggleMeetingStatus = (e) => {
    e.preventDefault();
  }

  render() {

    return (
      <div class={`wrap ${this.state.scrolled ? 'scrolled' : ''}`}>
        <Header />

        <div class='room-photo'></div>

        <div class='timeline'>
          <div class='timeline-header'>
            <div class='container'>

              <h3 class='title'>All meetings</h3>
              <p>February 29th</p>

            </div>
          </div>

          <MeetingsList
            meetings={this.state.meetings}
            toggleMeetingStatus={this.toggleMeetingStatus}
            />

        </div>
      </div>
    );
  }
}

@@ -180,16 +180,58 @@
 gsList';
+%0Aimport BookForm from '../Forms/BookForm';
 %0A%0Aexport
@@ -319,16 +319,79 @@
 ings: %5B%5D
+,%0A    formIsOpened: false,%0A    activeRoom: %7B id: '', name: '' %7D
 %0A  %7D%0A%0A  
@@ -1308,32 +1308,253 @@
 %0A%0A  
-render() %7B%0A%0A    return (
+toggleBookForm = (roomId, roomName) =%3E %7B%0A    this.setState(%7BformIsOpened: !this.state.formIsOpened%7D);%0A    this.toggleActiveRoom(roomId, roomName);%0A  %7D%0A%0A  render() %7B%0A    const %7B roomId %7D = this.props.location;%0A%0A    return (%0A    %3Cdiv class='look'%3E
 %0A   
@@ -1633,16 +1633,51 @@
  %3CHeader
+ openBookForm=%7Bthis.toggleBookForm%7D
  /%3E%0A%0A   
@@ -1889,28 +1889,55 @@
     
-%3Cp%3EFebruary 29th
+%7BroomId && %3Cp%3E%7Bthis.props.location.roomId%7D
 %3C/p%3E
+%7D
 %0A%0A  
@@ -2117,31 +2117,251 @@
 /%3E%0A%0A        
+  
 %3C/div%3E%0A
+        %3C/div%3E%0A%0A        %3CBookForm%0A          isOpened=%7Bthis.state.formIsOpened%7D%0A          closeBookForm=%7Bthis.toggleBookForm%7D%0A          room=%7Bthis.state.activeRoom%7D%0A          onChange=%7Bthis.toggleActiveRoom%7D%0A        /%3E%0A
       %3C/div%3E

improve Look component