// inspiration: https://dribbble.com/shots/3003823-Notification-Dropdown

const {
  Component
} = React;
const {
  Motion,
  StaggeredMotion,
  spring,
  presets
} = ReactMotion;

class Media extends Component {
  render() {
    const cls = "nav__notifications__list__item" + (this.props.new ? " nav__notifications__list__item--new" : "");
    return (
      <li style={this.props.style} className={cls}>
        <div className="nav__notifications__list__item__display">
          <Motion defaultStyle={{x:0.6}} style={{x:spring(this.props.open ? 1 : 0.6, presets.wobbly)}}>
            {interp => <img src={this.props.imageURL} className="nav__notifications__list__item__photo" style={{transform: `scale(${interp.x})`}}/> }
          </Motion>
        </div>
        
        <div className="nav__notifications__list__item__desc">
          <Motion defaultStyle={{x: 0}} style={{x: spring(this.props.open ? 0 : 1, presets.wobbly)}} >
          
              {interp => <div style={{transform: `translateZ(0) translateY(${-15*interp.x}px)`, opacity: 1-interp.x}}>
              <em>{this.props.name}</em> {this.props.action} <em> {this.props.content}</em>.
              </div>}
          
             </Motion>
        </div>
        </li>
    );
  }
}

class NotificationsBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      media: [ {imgURL: 'https://randomuser.me/api/portraits/men/74.jpg',
               name: 'Gerlald Thompson',
               action: 'approved your request to',
               content: 'become friends',
                new: true},
              {imgURL: 'https://randomuser.me/api/portraits/women/32.jpg',
               name: 'Dana Newman',
               action: 'liked',
               content: 'your photo',
                new: true},
              {imgURL: 'https://randomuser.me/api/portraits/men/93.jpg',
               name: 'Dan Ingrid',
               action: 'also commented on',
               content: 'your status',
                new: true},
             {imgURL: 'https://randomuser.me/api/portraits/women/16.jpg',
               name: 'Lena Direlson',
               action: 'checked in at',
               content: 'Greenstreet Pub',
               new: false},
             {imgURL: 'https://randomuser.me/api/portraits/men/78.jpg',
               name: 'Dan Witherson',
               action: 'also commented on',
               content: 'your status',
               new: false}]
    };
  }
  render() {
    const {media} = this.state;
    const motionParams = media.map(_ => Object.assign({},{h:0}));
    
    return (
      <Motion defaultStyle={{opacity: 0}} style={{opacity: spring(this.props.open ? 1 : 0, presets.stiff)}}>
        {interpOuter =>
      <div style={interpOuter} className="nav__notification_bar">
         <Motion defaultStyle={{x: 0}} style={{x: spring(this.props.open ? 0 : -5, presets.stiff)}}>
           {interp => <h3 style={{transform: `translateY(${interp.x}px)`}}>Notifications</h3>}
        </Motion>
            
                  <StaggeredMotion defaultStyles={motionParams} styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
    return i === 0
      ? {h: spring(this.props.open ? 100 : 0, presets.wobbly)}
      : {h: spring(prevInterpolatedStyles[i - 1].h)}
  })}>
                    {interps =>
              <ul className="nav__notifications__list">
          {interps.map((style, i) => <Media key={i} style={{height:style.h}} imageURL={media[i].imgURL} name={media[i].name} action={media[i].action} content={media[i].content} open={this.props.open} new={media[i].new} />)}
                </ul>
                    }
                  </StaggeredMotion>
          </div>
      }
        </Motion>
    );
  }
}

class Notifications extends Component {
  constructor(props) {
    super(props);
    this.toggleNotificationBar = this.toggleNotificationBar.bind(this);
    this.count = 0;
  }

  toggleNotificationBar() {
    this.props.toggleNotificationsBar();
  }

  render() {
    return (
      <div className="nav__notification">
        <span className="nav__notification__icon" onClick={this.toggleNotificationBar}/>
        <Motion defaultStyle={{x: 0}} style={{x: spring(this.props.open ? 0 : 1, presets.stiff)}} >
          {interp => <span className="nav__notification__num" style={{transform: `translateZ(0) scale(${interp.x}`, opacity: interp.x}}>3</span>}
         
        </Motion>
          
          <NotificationsBar open={this.props.open}/>
    </div>
    )
  }
}

class NavBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isNotificationsOpen: false
    }
    this.toggleNotificationsBar = this.toggleNotificationsBar.bind(this);
    this.closeNotificationsBar = this.closeNotificationsBar.bind(this);
  }
  toggleNotificationsBar () {
    this.setState({...this.state, isNotificationsOpen: !this.state.isNotificationsOpen});
  }
  closeNotificationsBar() {
    if (!this.state.isNotificationsOpen) return;
    this.setState ( {...this.state, isNotificationsOpen: false})
  }
  render() {
    return (
      <nav tabIndex="0" onBlur={ this.closeNotificationsBar }>
        <Notifications toggleNotificationsBar={this.toggleNotificationsBar} open={this.state.isNotificationsOpen} />
      </nav>
    )
  }
}

ReactDOM.render(<NavBar/>, document.body)