import React from 'react';
import * as qs from 'query-string';
import moment from 'moment';

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

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

export default class Thread extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: {},
      replies: []
    };
    this.loaded = this.loaded.bind(this);
  }
  componentDidMount() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    this.loadReplies();
  }
  loadReplies() {
    this.setState({ replies: [] })
    const { mid } = this.props.match.params;
    let params = {
      mid: mid
    }
    if (this.props.visitor && this.props.visitor.hash) {
      params.hash = this.props.visitor.hash
    };
    const url = `https://api.juick.com/thread?${qs.stringify(params)}`;
    fetch(url)
      .then(response => {
        return response.json()
      })
      .then(data => {
        let msg = data.shift();
        this.setState({
          msg: msg,
          replies: data
        })
      }
      ).catch(ex => {
        console.log(ex);
      });
  }
  loaded() {
    return this.state.msg.mid;
  }
  render() {
    const msg = this.state.msg;
    return (
      <React.Fragment>
        <ul id="0">
          <li className="msg msgthread">
            {
              this.loaded() ? (
                <Message data={msg} visitor={this.props.visitor}>
                  <form className="msg-comment-target">
                    <input type="hidden" name="mid" value={msg.mid} />
                    <div className="msg-comment">
                      <div className="ta-wrapper">
                        <textarea name="body" rows="1" className="reply" placeholder="Write a comment..."></textarea>
                      </div>
                    </div>
                  </form>
                  {
                    msg.recommendations && (
                      <div className="msg-recomms">{`Recommended by (${msg.recommendations.length}): `}
                        {
                          msg.recommendations.map(it => (
                            <a href={`/${it}/`}>{it}</a>
                          )).reduce((prev, curr) => [prev, ', ', curr])
                        }
                      </div>
                    )
                  }
                </Message>
              ) : (
                  <Spinner />
                )
            }
          </li>
        </ul>
        {
          this.loaded() && (
            <React.Fragment>
              <div className="title2">
                {
                  this.props.visitor.uid > 0 &&
                  <img src={`https://api.juick.com/thread/mark_read/${msg.mid}-${msg.rid || 0}.gif?hash=${this.props.visitor.hash}`} />
                }
                <h2>{msg.replies && `Replies (${msg.replies})`}</h2>
              </div>
              <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">
                                <a href={`/${msg.user.uname}/`} itemProp="url" rel="author"><span itemProp="name">{msg.user.uname}</span></a>
                              </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>
                          </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">{`/${msg.rid}`}&nbsp;
                          {
                            msg.replyto > 0 &&
                            (
                              <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
                            )
                          }
                          {
                            this.props.visitor.uid > 0 ? (
                              <React.Fragment>
                                <span>&middot;&nbsp;</span>
                                <a href={`/post?body=%23${msg.mid}/${msg.rid}%20`} className="a-thread-comment">Reply</a>
                                <div className="msg-comment-target msg-comment-hidden"></div>
                              </React.Fragment>
                            ) : (
                                <React.Fragment>
                                  <span>&nbsp;&middot;&nbsp;</span><a href="#" className="a-login">Reply</a>
                                </React.Fragment>
                              )
                          }
                        </div>
                      </div>
                    </li>
                  ))
                }
              </ul>
            </React.Fragment>
          )
        }
      </React.Fragment>
    )

  }
}