content: import React from 'react';
  import theme_colors, {theme_fonts} from '../../scripts/globals';
  import Icon_Person from '../../img/icon_person';
  import Icon_Dash from '../../img/icon_dash';
  import Icon_Meter_Static from '../../img/icon_meter_static';
  import Icon_Keyboard from '../../img/icon_keyboard';
  import Icon_Fullcontrol from '../../img/icon_fullcontrol';
  import Img_Map from '../../img/img_map';
  
  var url = "http://" + window.location.host + "/src/dir/assign2/index.html";
  
  const User_Panel = ({props}) => {
      return (
          <div className="user-panel">User panel</div>
      )
  }
  
  class Widget_Window extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              error: null,
              isLoaded: false,
              items: {},
          };
      }
  
      componentDidMount() {
          const request = "https://www.platypus.null-terminator.com/api";
          fetchJSON(request, 
              this.validateResponse.bind(this), 
              this.logError.bind(this),
              this.handleJsonResponse.bind(this));
      }
  
      validateResponse(result) {
          this.setState({ isLoaded: true });
  
          if(!result.ok) { throw Error(result.statusText); }
  
          else{ 
              console.log("shit be fiiiiiiiiiine")
          }
          return result;
          
      }
  
      handleJsonResponse(response) {
          console.log("got to 'handleresponse'");
          console.log(response);
          this.setState({ items: response });
          
      }
  
      logError(error) {
          console.log("THEY BE AN ERRRRR");
          console.log(error);
          var thing = JSON.stringify(error);
  
          console.log(thing);
          this.setState({ error: error })
      }
  
      render(){
          const { error, isLoaded, items } = this.state;
          var isMobile = WURFL.is_mobile.toString();
          var deviceName = WURFL.complete_device_name.toString();
          var formFactor = WURFL.form_factor.toString();
          if (error) {
              return <div>Error: {error.message}</div>;
          }
          else if (!isLoaded) {
              return <div>Loading...</div>;
          } else {
              return (
                  <div className="widget students">
                      <div>{this.state.items.buttstring}</div>
                      <div>is Mobile: {isMobile}</div>
                      <div>device name: {deviceName}</div>
                      <div>form factor: {formFactor}</div>
                      <div>height: {this.props.height}</div>
                      <div>width: {this.props.width}</div>
                      <div>avail height: {this.props.availHeight}</div>
                      <div><a href ={url}>Click me</a></div>
                      <div><Icon_Meter_Static height="100px" /></div>
                      <div><Icon_Keyboard height="100px" /></div>
                      <div><Icon_Fullcontrol height="100px" /></div>
                      <div>{Img_Map({height: "100px"}).Icon_Distribute}</div>
                      <div>{Img_Map({height:"100px"}).Icon_Male}</div>
                  </div>
              );
          }
      }
  }
  
  class App_Content extends React.Component {
      constructor(props) {
          super(props);
          // This is bad, do not put props in state.
          /*this.state = {
              bgColor: this.props.bgColor || theme_colors.accent_six
          }*/
      }
  
      render() {
          console.log(this.props);
          return (
              <div className="app_content" style={{backgroundColor: this.props.bgColor || theme_colors.accent_six}}>
                  <Widget_Window props={this.props} />
                  <User_Panel />
              </div>
          )
      }
  }
  
  
  class Nav_Buttons extends React.Component {
      constructor(props) {
          super(props);
          this.state = {}
      }
  
      render() {
          let style = { 
              color: this.props.color,
              fontFamily: theme_fonts.content
          }
          return (
              <div className="nav_button" id={this.props.descr} style={style}>
                  <div className="nav_button-icon">{this.props.icon}</div>
                  <div className="nav_button-descr">{this.props.descr}</div>
              </div>
          )
      }
  }
  
  class Left_Nav extends React.Component {
      constructor(props) {
          super(props);
          this.state = {}
      }
  
      render() {
          let arr = {'Profile': <Icon_Person height="40%"/>, 'Dashboard': <Icon_Dash height="40%"/>}
          const litems = Object.keys(arr).map(item => <Nav_Buttons key={item} descr={item} color={theme_colors.accent_five} icon={arr[item]} />);
          
          return (
              <div className="left_nav">
                  <a href="/" className="nav_button-link">{litems}</a>
              </div>
          )
      }
  }
  
  class Main_Content extends React.Component {
      constructor(props) {
          super(props);
          this.state = {}
      }
  
      render() {
          return (
              <div className="main_content">
                  <Left_Nav />
                  <App_Content 
                      bgColor={theme_colors.accent_six}
                      {...this.props}
                  />
              </div>
          )
      }
  }
  
  // API CALL FUNCTIONS
  function logResult(result) { // For successful fetches
      console.log("AT LOGRESULT")
      console.log(result);
  }
  
  function readResponseAsJSON(response) {
      return response.json();
  }
  
  function fetchJSON(pathToResource, validateResponse, logError, handleJsonResponse, optional = null) {
      fetch(pathToResource, optional)
      .then(validateResponse) // if not valid, skips rest and goes to catch
      .then(readResponseAsJSON)
      .then(handleJsonResponse)
      .catch(logError);
  }
  
  export default Main_Content;