/*
*Created by Luis Diaz
*Creates a calendar using the JQuery plugin FullCalendar()
*Fetches sql catalog information through ajax and reflects on calendar.
*
*This offers a temporary solution to the training schedule, stil have to 
*configure webpack to make individual components.. allows for better readability and understanding
*/


//Initializing the variables we'll use below.
const events_new = []; 
var new_events; 


//collections() prepares data to be reflected on calendar
function collections(data){
  var label;     
  for (var i = 0 ; i < data.length; i++){
    
    label = data[i]["catalog"];
    let section = data[i]["section"];
    let status = data[i]["status"];
    
    // Calendar entries for PBI
    if(label == "PER-231-1" || label == "AWR-131-2" || label == "PER-231" || label == "AWR-131-C" || label == "PER-231-2"){
      if(status == '1') {
        if(section == 'C') {
          events_new.push({
              title: "Prevention of Bombing Incidents, Tactical CLOSED FOR REGISTRATION", 
              start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["start_time"].replace(/\d9........\s/,"")),
              end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["end_time"].replace(/\d9........\s/,"")),
              color: "#8d0000"
            
          });
        } else {
          events_new.push({
            title: data[i]["name"]+" CLOSED FOR REGISTRATION", 
            start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["start_time"].replace(/\d9........\s/,"")),
            end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["end_time"].replace(/\d9........\s/,"")),
            color: "#8d0000"
          
          });
        }
      } else if(status == '0') {
        if(section == 'C') {
          events_new.push({
              title: "Prevention of Bombing Incidents, Tactical", 
              start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["start_time"].replace(/\d9........\s/,"")),
              end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["end_time"].replace(/\d9........\s/,"")),
              url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId="+data[i]['id'],
              color: "#8d0000"
            
          });
        } else {
          events_new.push({
            title: data[i]["name"], 
            start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["start_time"].replace(/\d9........\s/,"")),
            end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["end_time"].replace(/\d9........\s/,"")),
            url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId="+data[i]['id'],
            color: "#8d0000"
          
          });
        }
      }
    }
    // Calendar entries for RBI
    else if(label == "PER-230-1" || label == "AWR-130-2" || label == "AWR-130-C" || label == "PER-230" || label == "PER-230-2"){
      if(status == '1'){
        events_new.push({
          title: data[i]["name"]+" CLOSED FOR REGISTRATION", 
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["start_time"].replace(/\d9........\s/,"")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["end_time"].replace(/\d9........\s/,""))
            
        });
      } else if (status == '0') {
        events_new.push({
          title: data[i]["name"], 
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["start_time"].replace(/\d9........\s/,"")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/,'T'+data[i]["end_time"].replace(/\d9........\s/,"")),
          url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId="+data[i]['id']
          
        });
      }
    }
    // Calendar entries for DART
    else if (label == "PER-392") {
      if (status == '1') {
        events_new.push({
          title: data[i]["name"] + " CLOSED FOR REGISTRATION",
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          color: "#543611"
        });
      } else if (status == '0') {
        events_new.push({
          title: data[i]["name"],
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId=" + data[i]['id'],
          color: "#543611"
        });
      }
    }
    // Calendar entries for MOR
    else if (label == "TMP-101") {
      if (status == '1') {
        events_new.push({
          title: data[i]["name"] + " CLOSED FOR REGISTRATION",
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          color: "#747475"
        });
      } else if (status == '0') {
        events_new.push({
          title: data[i]["name"],
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId=" + data[i]['id'],
          color: "#747475"
        });
      }
    }
    // Calendar entries for ILERSBA
    else if (label == "TMP-102") {
      if (status == '1') {
        events_new.push({
          title: data[i]["name"] + " CLOSED FOR REGISTRATION",
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          color: "#F58B4A"
        });
      } else if (status == '0') {
        events_new.push({
          title: data[i]["name"],
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId=" + data[i]['id'],
          color: "#F58B4A"
        });
      }
    }
    // Calendar entries for PEI
    else if (label == "PER-394") {
      if (status == '1') {
        events_new.push({
          title: data[i]["name"] + " CLOSED FOR REGISTRATION",
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          color: "#E81E79"
        });
      } else if (status == '0') {
        events_new.push({
          title: data[i]["name"],
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId=" + data[i]['id'],
          color: "#E81E79"
        });
      }
    }
    // Calendar entries for TRSBI
    else if (label == "PER-395") {
      if (status == '1') {
        events_new.push({
          title: data[i]["name"] + " CLOSED FOR REGISTRATION",
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          color: "#D2B53B"
        });
      } else if (status == '0') {
        events_new.push({
          title: data[i]["name"],
          start: data[i]["start_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["start_time"].replace(/\d9........\s/, "")),
          end: data[i]["end_date"].replace(/\s\d+:\d+:\d+/, 'T' + data[i]["end_time"].replace(/\d9........\s/, "")),
          url: "http://www.emrtc.nmt.edu/training/portal/course.php?courseId=" + data[i]['id'],
          color: "#D2B53B"
        });
      }
    }
  }
  return events_new; 
}



/* 
*Calendar is our child element this is where the calendar will show up
*/
class Calendar extends React.Component{
  
  //Called once at start of execution
  constructor(props){
    super(props);
    this.state= {
      events:[]
    };
  }
  
  //Receives props after ajax is finished, this is called only when stgooate is changed.
  componentWillReceiveProps(nextProps){
    this.setState({events: nextProps.events})
  }
  //Updates component after ComponentWillReceiveProps is called and state is updated.
  componentWillUpdate(nextProps,nextState){
    const { calendar } = this.refs;
    $(calendar).fullCalendar('removeEventSource',{events:this.state.events});
    $(calendar).fullCalendar('addEventSource',{events:nextProps.events});
    $(calendar).fullCalendar('refetchEvents');
  }
  
  //Called at the beginning of execution, calling the old state/events
  componentDidMount(){
    const { calendar } = this.refs; 

    $(calendar).fullCalendar({
        theme:true,
        header:{
          left:'prev',
          center:'title',
          right:'next'
      },
        events: this.state.events, 
        eventRender: function(event,element){
            element.qtip({
                content:{
                    text:event.title
                }
            });
        }
    }); 
      
    //Adds the block to the header of the calendar.
    $('div.fc-toolbar').css('display','block');
    $('div.fc-toolbar').addClass('ui-datepicker-header ui-widget-header ui-help-clearfix ui-corner-all');
        
  }

  //Called within 10 seconds after execution, allows unmount for other mounts to use the space. Doesn't make it dissapear though.
  componentWillUnmount(){
      const { calendar } = this.refs; 
      $(calendar).fullCalendar('destroy'); 
  }
  
  
  render(){
    return(
      <div ref = "calendar"></div> 
      ); 
  }
}




//Parent container <APP/>
class App extends React.Component { 
   
  constructor(props){
    super(props); 
    this.state ={
       events_example:[
      ]
    };
    
  }
 
  //Ajax call to fetch data from back-end,updates state and sends to child component (calendar)
  componentWillMount(){
  $.ajax({
    url:"php_react_queries/calendar_query.php"}).then(function(data){
      new_events = $.parseJSON(data); 
      new_events = collections(new_events); 
      this.setState({events_example:new_events});
    }.bind(this));
  }

  render() {
  return (
    <div> 
      <Calendar events = {this.state.events_example}/> 
    </div> 
    ); 
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));