import { Component, React, KeyValuePair } from 'chen-react';
import { IRouter } from 'react-router';
import { Spinner, ProfilePic, PreviewFile, LinkPreview } from '../pipes';

import { ProfileLink } from './popover';
import { Content } from './content';

import * as moment from 'moment';

export interface ChatListProps {
  router? : IRouter;
  messages? : KeyValuePair<any>[];
  onScrolledTop? : Function;
  isLoadingMessages? : boolean;
  onFileClick? : (file: KeyValuePair<any>) => void;
  user: KeyValuePair<any>;
}

export interface ChatListState {}

export class ChatList extends Component <ChatListProps, ChatListState> {

  private container;

  public handleScrolling(event: JQueryEventObject, pos) {
    if (pos < 1) {
      this.props.onScrolledTop(this.props.messages[0]);
    }
  }

  public componentDidMount() {
    $(this.container).slimScroll({
      height: `${$('#chat-preview').offset().top - $(this.container).offset().top - 10}px`,
      distance: '3px',
      size: '3px',
      start: 'bottom',
      touchScrollStep: 50,
      railVisible: false
    }).bind('slimscrolling', this.handleScrolling.bind(this));

  }

  public componentWillUnmount() {
    $(this.container).unbind('slimscrolling');
  }

  public scrollToBottom() {
    this.resize();
    $(this.container).slimScroll({
      scrollTo: $(this.container)[0].scrollHeight + 'px',
    });
  }

  public resize() {
    $(this.container).slimScroll({
      height: `${$('#chat-preview').offset().top - $(this.container).offset().top - 10}px`
    });
  }

  public componentDidUpdate(prevProps: ChatListProps, prevState: ChatListState) {
    if (this.props.messages.length && prevProps.messages != this.props.messages
      && (!prevProps.messages.length || prevProps.messages[0]['id'] == this.props.messages[0]['id'])) {
      this.scrollToBottom();
    }
  }

  public render() {
    let messages = [];
    if (this.props.messages) {
      let lastDay = null;
      messages = this.props.messages.map((message, i) => {
        let name = '';

        if (message['user']['firstName']) {
          name = message['user']['firstName'];
        }

        if (message['user']['lastName']) {
          name += ` ${message['user']['lastName']}`;
        }

        let file;
        if (message['file']) {
          file = (
            <div className="chat-file-preview">
              <PreviewFile file={message['file']} onClick={e => {e.preventDefault(); this.props.onFileClick(message['file']) }}/>
            </div>
          )
        }

        let pipe = null;
        let day = moment(message['createdAt']).calendar(null,  {
          sameDay: '[Today]',
          nextDay: '[Tomorrow]',
          nextWeek: 'dddd',
          lastDay: '[Yesterday]',
          lastWeek: '[Last] dddd',
          sameElse: 'DD/MM/YYYY'
        });

        if (day != lastDay) {
          lastDay = day;
          pipe = <div className="vr-date text-center">
            <hr/>
            <span>{day}</span>
          </div>;
        }

        return <li key={message['id']} className={(!message['createdAt'] ? 'pending': '')}>
          {pipe ? pipe : ''}
          <div className="chat-user-photo">
            <ProfilePic user={message['user']} size="small" />
          </div>
          <div className="chat-user-content clearfix">
            <div className="chat-user-bubble">
              <h5>
                <ProfileLink user={message['user']} isOwn={message['userId'] == this.props.user['id']} router={this.props.router}>
                  {name}
                  <span>@{message['user']['username']}</span>
                </ProfileLink>
              </h5>
              <Content user={this.props.user} data={message['content']} router={this.props.router} mentions={message['mentions']} />
              <LinkPreview link={message['link']} singleColumn={true} />
              {file}
            </div>
             <small>{moment(message['createdAt']).fromNow()}</small>
          </div>
        </li>
      });
    }

    if (!messages.length && !this.props.isLoadingMessages) {
      messages = [<li key={0} className="text-center">No message found.</li>]
    }

    if (this.props.isLoadingMessages) {
      messages.unshift(<li key={0}><Spinner /></li>);
    }

    return (
      <div ref={ref => this.container = ref} className="user-chat-list scroll-chat-list">

        <ul>
        {messages}
        </ul>
      </div>
    );
  }
}