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() {
    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 (
      <React.Fragment>
        <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 src={msg.recommendations || []} />
                </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">
                    {!msg.user.banned ? (
                      <React.Fragment>
                        <span itemProp="author" itemScope="" itemType="http://schema.org/Person">
                          <Link to={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></Link>
                        </span><Avatar user={msg.user} />
                      </React.Fragment>) : (
                        <React.Fragment>
                          <span>[удалено]:</span><Avatar user={{ uid: 0 }} />
                        </React.Fragment>
                      )
                    }
                    <div className="msg-ts">
                      <a href={`/${msg.user.uname}/${msg.mid}`}>
                        <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" 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>
                  </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 itemProp="image" src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
                    </p>
                  }
                  <div className="msg-links">
                    {
                      this.props.visitor.uid > 0 ? (
                        <React.Fragment>
                          {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>}
                        </React.Fragment>
                      ) : (
                          <React.Fragment>
                            <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <Button className="a-login">Reply</Button>}
                          </React.Fragment>
                        )
                    }
                  </div>
                </div>
              </li>
            )) : (
                <React.Fragment>
                  {Array(loaders).fill().map((it, i) => <Spinner key={i} />)}
                </React.Fragment>
              )
          }
        </ul>
      </React.Fragment>
    );
  }
}

const linkStyle = {
  cursor: 'pointer'
};

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

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