import React from 'react';
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 Icon from './Icon';
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() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    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
    })
  }
  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;
    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>
        {!this.state.loading ? (
          <ul id="replies">
            {
              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 || <Button onClick={() => this.setActive(msg)}><Icon name="ei-envelope" size="s" />Reply</Button>}
                            {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>
              ))
            }
          </ul>) : (
            <React.Fragment>
              <Spinner /><Spinner /><Spinner />
            </React.Fragment>
          )}
      </React.Fragment>
    )
  }
}

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