import React, { Component } from 'react';
import styles from './meetups.css';
import meetup_banner from '../../assets/images/scin_imgs/topbanner.jpg';
import Header from '../../containers/Header';


class MeetUps extends Component {

    constructor(props){
        super(props);
        this.state={
           meetUpId: 0,
           meetups:[]
        };
        this.handleClick = this.handleClick.bind(this);
    }
    componentDidMount(){
        this.getMeetups()
    }

    handleClick(id) {
    this.setState({
       meetUpId: id
    });
}

    getMeetups(){
          fetch('http://206.189.130.109:8000/api/v1/meetups/')
          .then(res => res.json())
          .then(data => this.setState({meetups:data.results}))
    }

    handleSubmit = event => {
        event.preventDefault();
         //console.log(this.state)

         fetch('http://206.189.130.109:8000/api/v1/meetups/rsvp/', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({

                "id":this.state.meetups.id,
                "meetup_type": "meetup",
                "status": true,
                "meetup": 1,
                "user": 2


            }),
        }).then(rsvp => {
            console.log(rsvp);
           // alert(rsvp.message)
        }).catch(err => err);

    }




    render() {
        // console.log(this.state.meetups)
        return (

            

              

                
 
 


                

                    

                    {this.state.meetups.map((meetup)=>

                        

                            

                                
                                
 {meetup.cost} 
                               
  this.handleClick(meetup.id)} className="btn" id={styles.rsvp_button} >{this.state.meetUpId == meetup.id ? 'GOING' :  'RSVP'}.  
  
                                

                                    

                                        

                                            

                                                
{meetup.meetup_date}


                                            
                                            

                                                
{meetup.title}
                                                
{meetup.time}
 

                                                
{meetup.venue}
                                                

                                                Learn More 

                                            
                                        
                                    
                                    

                                        
{meetup.hash_tag}  
                                        {/*  */}
                                    
                                
                            
                        

                        )}


                    
                


            

        )
    }
}

export default MeetUps;