import React from 'react';
import { Link } from 'react-router-dom';
import * as qs from 'query-string';
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';

export default class Thread extends React.Component {
  constructor(props) {
    super(props);
    const { msg } = (this.props.location.state || {});
    this.state = {
      msg: msg || {},
      replies: [],
      active: 0
    };
  }
  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,
          active: 0
        })
      }
      ).catch(ex => {
        console.log(ex);
      });
  }
  loaded = () => {
    return (this.state.replies && this.state.replies.length > 0) || ('mid' in this.state.msg && !('replies' in this.state.msg));
  }
  setActive(msg, event) {
    this.setState({
      active: msg.rid || 0
    })
  }
  postComment = (template) => {
    const url = `https://api.juick.com/comment?hash=${this.props.visitor.hash}`;
    let form = new FormData();
    form.append('mid', template.mid);
    form.append('rid', template.rid);
    form.append('body', template.body);
    form.append('attach', template.attach);
    fetch(url, {
      method: 'POST',
      body: form
    }).then(response => {
      return response.json()
    }).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} />}
                  <Recommendations src={msg.recommendations} />
                </Message>
              ) : (
                  <Spinner />
                )
            }
          </li>
        </ul>
        {
          <React.Fragment>
            {
              this.props.visitor.uid > 0 && msg.mid &&
              <div className="title2">
                <img style={{ display: 'none' }} 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>
            }
            {this.loaded() ? (
              <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} />}
                              </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>
        }
      </React.Fragment>
    )
  }
}

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