import React from 'react';

import ReactRouterPropTypes from 'react-router-prop-types';
import { UserType } from './Types';

import { Link } from 'react-router-dom';
import moment from 'moment';

import Message from './Message';
import MessageInput from './MessageInput';
import Spinner from './Spinner';
import Avatar from './Avatar';
import Button from './Button';

import { format } from '../utils/embed';

import { getMessages, comment, markReadTracker } from '../api';

export default class Thread extends React.Component {
  constructor(props) {
    super(props);
    const { msg } = (this.props.location.state || {});
    this.state = {
      msg: msg || {},
      replies: [],
      loading: false,
      active: 0
    };
  }
  componentDidMount() {
    this.loadReplies();
  }
  loadReplies() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    this.setState({ replies: [], loading: true });
    const { mid } = this.props.match.params;
    let params = {
      mid: mid
    };
    if (this.props.visitor && this.props.visitor.hash) {
      params.hash = this.props.visitor.hash;
    }
    getMessages('/thread', params)
      .then(response => {
        let msg = response.data.shift();
        this.setState({
          msg: { ...msg },
          replies: response.data,
          loading: false,
          active: 0
        });
      }
      ).catch(ex => {
        console.log(ex);
      });
  }
  setActive(msg, event) {
    this.setState({
      active: msg.rid || 0
    });
  }
  onReply = (msg) => {
    if (msg.mid == this.state.msg.mid) {
      this.setState({
        replies: [...this.state.replies, msg]
      });
    }
  }
  postComment = (template) => {
    const { mid, rid, body, attach } = template;
    comment(mid, rid, body, attach).then(res => {
      this.loadReplies();
    })
      .catch(console.log);
  }

  render() {
    const msg = this.state.msg;
    const loaders = Math.min(msg.replies || 0, 10);
    return (
      <>
        <ul id="0">
          <li className="msg msgthread">
            {
              msg.mid ? (
                <Message data={msg} visitor={this.props.visitor}>
                  {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
                  <Recommendations forMessage={msg} />
                </Message>
              ) : (
                  <Spinner />
                )
            }
          </li>
        </ul>
        <ul id="replies">
          {
            !this.state.loading ? this.state.replies.map((msg) => (
              <li id={msg.rid} key={msg.rid} className="msg">
                <div className="msg-cont">
                  <div className="msg-header">
                    <Avatar user={msg.user}>
                      <div className="msg-ts">
                        <a href={`/${msg.user.uname}/${msg.mid}`}>
                          <time dateTime={msg.timestamp}
                            title={moment.utc(msg.timestamp).local().format('lll')}>
                            {moment.utc(msg.timestamp).fromNow()}
                          </time>
                        </a>
                        {msg.replyto > 0 &&
                          (
                            <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
                          )}
                      </div>
                    </Avatar>
                  </div>
                  <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div>
                  {
                    msg.photo &&
                    <p className="ir"><a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
                      <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
                    </p>
                  }
                  <div className="msg-links">
                    {
                      this.props.visitor.uid > 0 ? (
                        <>
                          {this.state.active === msg.rid || <span style={linkStyle} onClick={() => this.setActive(msg)}>Reply</span>}
                          {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
                        </>
                      ) : (
                          <>
                            <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button>Reply</Button>}
                          </>
                        )
                    }
                  </div>
                </div>
              </li>
            )) : (
                <>
            {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
          </>
          )
      }
        </ul>
      </>
    );
  }
}

const linkStyle = {
  cursor: 'pointer'
};

Thread.propTypes = {
  location: ReactRouterPropTypes.location,
  history: ReactRouterPropTypes.history,
  match: ReactRouterPropTypes.match,
  visitor: UserType.isRequired
};

function Recommendations({ forMessage, ...rest }) {
  const { likes, recommendations } = forMessage;
  return recommendations && recommendations.length > 0 && (
    <div className="msg-recomms">{'Recommended by '}
      {
        recommendations.map(it => (
          <Link key={it} to={`/${it}/`}>{it}</Link>
        )).reduce((prev, curr) => [prev, ', ', curr])
      }
      {
        likes > recommendations.length && (<span>&nbsp;and {likes - recommendations.length} others</span>)
      }
    </div>
  ) || null;
}