var data = {
  baseURL: '',
  graphicsURL: 'https://zephyo.github.io/treehacks/graphics/',
  activeTab: 0,
  userData: null,
  feed: [
    
  ],
},
    
userBase='users',
    
config = {
  apiKey: "AIzaSyBnWbqZC0wncY06pWlHX8DCbIM_EM9zrE8",
  authDomain: "day-7-messaging.firebaseapp.com",
  databaseURL: "https://day-7-messaging.firebaseio.com",
  projectId: "day-7-messaging",
  storageBucket: "day-7-messaging.appspot.com",
  messagingSenderId: "307150346579"
};

firebase.initializeApp(config);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = data;
  }

  componentWillMount() {
    this.setState({
      firebaseRef: firebase.database().ref(userBase),
    }, this.update);
  }
  
  setActiveTab = (index) => {
      this.setState({
      activeTab: index,
    });
  }
  
  checkLogin = (user, pass) => {
    //check against database 
    //if (user)
    //if valid, set userData
    this.setState({
      userData: 
      {
        profileImage: '',
        name: 'Gloria Wang',
        username: 'gloria',
        lastCheckin: '02/14/2019',
        checkin: [
          {
            q: 'How are you feeling today?',
            type: 'range',
          },
          {
            q: 'Have you took your medication?',
            type: 'yesno'
          }
        ],
      },
    });
  }
  
  // update this.state.lastCheckin as well as input checkin data to feed/database
  updateCheckin = () => {
    this.setState({
    userData: {
          ...this.state.userData,
          lastCheckin: moment().format('L')
        }
    });
  }
  
  //check this.state.lastCheckin and see whether user has checked in today
  needToCheckin = () => {
    if (this.state.userData.lastCheckin != moment().format('L')){
      return true;
    }
    else{
      return false;
    }
  }
  
  //logout
  logout = () => {
    this.setState({
    userData: null
    });
  }
  
  render() {
    if (this.state.userData === null){
      return (
        <HomePage
          graphicsURL = {this.state.graphicsURL}
          checkLogin = {this.checkLogin}
        />
      );
    }
    var activeTab;
    //active tab is feed
    if (this.state.activeTab == 0){
      activeTab = (
        <FeedTab />
      );
    }
    //active tab is network
    else if (this.state.activeTab == 1){
      activeTab = (
        <NetworkTab />
      );
    }
    //active tab is profile
    else{
      activeTab = (
        <UserTab 
          logout = {this.logout}
          />
      );
    }
    
    return (
      <div className="container">
        <div className="bg"></div>
        <div className="main-bg-texture"></div>
        <NavBar
           graphicsURL = {this.state.graphicsURL}
           setActiveTab = {this.setActiveTab}
          />
          {activeTab}
       {this.needToCheckin() ? 
          <CheckinModal 
            graphicsURL = {this.state.graphicsURL}
            updateCheckin = {this.updateCheckin}
          /> 
          : null}
      </div>
    );
  }
}

const NavBar = props => {
  return (
    <nav className="main-nav">
      <div className="nav-content">
        <img className="logo-img" src={props.graphicsURL+"icon.png"}/>
        <span className="logo">my_friends
          <span className="sublogo">give and get support.</span>
        </span>
        <button id="feed-but" onClick={()=>props.setActiveTab(0)}><span className="jam jam-messages-alt" style={{color: '#9FC6C1'}}></span></button>
      <button id="network-but" onClick={()=>props.setActiveTab(1)}><span className="jam jam-users" style={{color: '#9FC6C1'}}></span></button>
      <button id="user-but" onClick={()=>props.setActiveTab(2)}><span className="jam jam-user" style={{color: '#9FC6C1'}}></span></button>
      </div>
    </nav>
  );
};

class FeedTab extends React.Component {
  constructor(props) {
    super(props);
  }
  
   componentDidMount() {
    autosize($('textarea'));
  }
  
  render (){ 
    return (
     <section className="feed">
      <div className="create-thought">
        <textarea rows="2" placeholder="Your thoughts"></textarea>
        <button id="update">update</button>
      </div>
      <h1 className="date-marker">February 15</h1>
      <div className="checkin activity">
        <div className="header">
          <div className="pic"></div><span className="name">Gloria Wang </span><span className="sub">&nbsp;checked in</span><span className="date">A few seconds ago</span>
          <button className="user-edit"><span className="jam jam-pencil"  style={{color: '#EFF0DA'}}></span></button>
        </div>
        <div className="content">
          <div className="mood"><span>feeling </span>
            <div className="mood-icon">5</div>
          </div><span>feeling better but still kinda sad because I don't know anyone in my dorm :/ is that just me?</span>
          <div className="mood"><span>took meds </span>
            <div className="mood-icon"><span className="jam jam-check"  style={{color: '#EFF0DA'}}></span></div>
          </div>
        </div>
        <div className="leave-comment">
          <input type="text" placeholder="comment.."/>
          <button><span className="jam jam-paper-plane"  style={{color: '#9FC6C1'}}></span></button>
        </div>
      </div>
      <div className="thought activity">
        <div className="header">
          <div className="pic"></div><span className="name">Brianna Burman</span><span className="sub">&nbsp;updated</span><span className="date">12 min ago</span>
        </div>
        <div className="reply"><span>worried/stressed abt interviews</span></div>
        <div className="comment"><span>you got this!!</span></div>
        <div className="comment"><span>So awesome you’re planning for them! Since you’re thinking about it, I’m sure you’ll be super prepared!</span></div>
        <div className="reply"><span>thx guys :) i appreicate it</span></div>
        <div className="leave-comment">
          <input type="text" placeholder="comment.."/>
          <button><span className="jam jam-paper-plane"  style={{color: '#9FC6C1'}}></span></button>
        </div>
      </div>
    </section>
    );
  }
}


const NetworkTab = props => {
  return (
    <section className="network">
      <div className="header">
        <div className="search-bar">
          <input type="text" placeholder="search"/>
          <button id="search-friends"><span className="jam jam-user-search" style={{color: '#9FC6C1'}}></span></button>
        </div>
        <button id="add-friends"><span className="jam jam-user-plus" style={{color: '#9FC6C1'}}></span></button>
      </div>
      <div className="friends">
        <div className="friend">
          <div className="pic"></div><span>Felicia Wilson</span>
          <button><span className="jam jam-heart" style={{color: '#e38882'}}></span></button>
        </div>
      </div>
    </section>
  );
};

class UserTab extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render (){ 
    return (
      <section className="user">
        <button id="edit"><span className="jam jam-pencil" style={{color: '#9FC6C1'}}></span></button>
        <div className="pic"></div>
        <h1>Gloria Wang</h1>
        <div className="check-in-edit">
          <h2>Your Daily Check-in</h2>
          <ul>
            <li>How are you feeling today?</li>
            <li>Did you take your medication?</li>
          </ul>
          <button>add more </button>
        </div>
        <button id="logout-but" onClick={()=>this.props.logout()}>logout</button>
      </section>
    );
  }
}

class CheckinModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      mood: 4
    };
  }
  
  componentDidMount() {
    $( 'input[type="range"]' ).each(function( index ) {
      let range =  $(this).parent().find('.indicator');
      let p = $(range).find('p');
      $(range).hide();

     $(this).focusin(function () {
        $(range).css('left', ('calc('+$(this).val()*(1/7)*100)+'% - 60px)');
         $(range).show();
     });

     $(this).focusout(function () {
        $(range).hide();
     });

      $(this).on('input', function() {
        $(range).css('left', ('calc('+$(this).val()*(1/7)*100)+'% - 60px)');
        $(p).text($(this).val());
      });
    });
  }
  
  setMood = (event) => {
    this.setState({mood: event.target.value});
  };
  
  render (){ 
    return (
      <div className="modal-bg">
        <div className="checkin modal"><img className="bg-texture first" src={this.props.graphicsURL + "flower.png"}/><img className="bg-texture second" src={this.props.graphicsURL + "thing.png"}/>
          <div className="bg"></div>
          <h1>{moment().format('MMMM D')}</h1>
          <h1 className="title"> 
            <div className="highlight"></div><span>check-in</span>
          </h1>
          <h2>How are you feeling today?</h2>
          <div className="mood-measurer">
            <input type="range" min="1" max="7" value={this.state.mood} onChange={(e) => this.setMood(e)}/>
            <div className="indicator">
              <p>4</p>
            </div>
            <div className="num"><small>1</small><small>7</small></div>
          </div>
          <textarea className="feelings" placeholder="How am I feeling? .."></textarea>
          <h2>Did you take your medication?</h2>
          <div className="yesno">
            <button className="yes"><span className="jam jam-check"   style={{color: 'white'}}></span></button>
            <button className="no"><span className="jam jam-close"   style={{color: '#8A8184'}}> </span></button>
          </div>
          <button id="submit" onClick={()=>this.props.updateCheckin()}><span className="jam jam-check"   style={{color: '#9FC6C1'}}></span></button>
        </div>
      </div>
    );
  }
}

class HomePage extends React.Component { 
  constructor(props) {
    super(props);
    this.state = {
      signingUp: false,
      loggingIn: false
    };
  }
  
  setSignUp = (bool) => {
    this.setState({
      signingUp: bool
    });
  }
  
  setLogin = (bool) => {
    this.setState({
      loggingIn: bool
    });
  }
  
  render (){ 
    var content;
    if (this.state.loggingIn){
      content = (
        <div className="login-page">
           <h2>my_friends
            <button className="back-but" onClick={()=>this.setLogin(false) }>
              <span className="jam jam-arrow-left" style={{color: '#635358'}}></span>
            </button>
          </h2>
          <input id="login-email" type="email" placeholder="email"></input>
          <input id="login-pass" type="password" placeholder="password"></input>
          <button className="login-but" onClick={()=>this.props.checkLogin($('#login-email').val(),$('#login-pass').val()) }>login</button>
        </div>
      );
    }else if (this.state.signingUp){
      content = (
        <div>
          
        </div>
      );
    }else{
      content = (
        <div>
          <h2>my_friends</h2>
          <p>give and get support from your support network. feel safe with the ones you trust.</p>
          <div className="buts">
            <button className="signup-but" onClick={()=>this.setSignUp(true)} >sign up</button>
            <button className="login-but" onClick={()=>this.setLogin(true) }>login</button>
          </div>
        </div>
      );
    }
    
    return (
      <div className="home-page">   
        <img className="bg-texture" src={this.props.graphicsURL+"hero.gif"}/>
        <img src={this.props.graphicsURL+"plants.png"}/>
      {content}
    </div>
    );
  }
}

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