/* jshint ignore:start */
import React from 'react';
import escapeHtml from 'misago/utils/escape-html';

const LAST_POSTER_URL = '<a href="%(url)s" class="poster-title">%(user)s</a>';
const LAST_POSTER_SPAN = '<span class="poster-title">%(user)s</span>';
const LAST_REPLY = '<abbr class="last-title" title="%(absolute)s">%(relative)s</abbr>';

export function Weight(props) {
  if (props.thread.weight == 2) {
    return <li className="thread-pinned-globally">
      <span className="material-icon">
        bookmark
      </span>
      <span className="icon-legend">
        {gettext("Pinned globally")}
      </span>
    </li>;
  } else if (props.thread.weight == 1) {
    return <li className="thread-pinned-locally">
      <span className="material-icon">
        bookmark_border
      </span>
      <span className="icon-legend">
        {gettext("Pinned locally")}
      </span>
    </li>;
  } else {
    return null;
  }
}

export function Unapproved(props) {
  if (props.thread.is_unapproved) {
    return <li className="thread-unapproved">
      <span className="material-icon">
        remove_circle
      </span>
      <span className="icon-legend">
        {gettext("Unapproved")}
      </span>
    </li>;
  } else if (props.thread.has_unapproved_posts) {
    return <li className="thread-unapproved-posts">
      <span className="material-icon">
        remove_circle_outline
      </span>
      <span className="icon-legend">
        {gettext("Unapproved posts")}
      </span>
    </li>;
  } else {
    return null;
  }
}

export function IsHidden(props) {
  if (props.thread.is_hidden) {
    return <li className="thread-hidden">
      <span className="material-icon">
        visibility_off
      </span>
      <span className="icon-legend">
        {gettext("Hidden")}
      </span>
    </li>;
  } else {
    return null;
  }
}

export function IsClosed(props) {
  if (props.thread.is_closed) {
    return <li className="thread-closed">
      <span className="material-icon">
        lock_outline
      </span>
      <span className="icon-legend">
        {gettext("Closed")}
      </span>
    </li>;
  } else {
    return null;
  }
}

export function Replies(props) {
  const message = ngettext("%(replies)s reply", "%(replies)s replies", props.thread.replies);
  const legend = interpolate(message, {'replies': props.thread.replies}, true);

  return <li className="thread-replies">
    <span className="material-icon">
      forum
    </span>
    <span className="icon-legend">
      {legend}
    </span>
  </li>;
}

export function LastReply(props) {
  let user = null;
  if (props.thread.url.last_poster) {
    user = interpolate(LAST_POSTER_URL, {
      url: escapeHtml(props.thread.url.last_poster),
      user: escapeHtml(props.thread.last_poster_name)
    }, true);
  } else {
    user = interpolate(LAST_POSTER_SPAN, {
      user: escapeHtml(props.thread.last_poster_name)
    }, true);
  };

  const date = interpolate(LAST_REPLY, {
    absolute: escapeHtml(props.thread.last_post_on.format('LLL')),
    relative: escapeHtml(props.thread.last_post_on.fromNow())
  }, true);

  const message = interpolate(escapeHtml(gettext("last reply by %(user)s %(date)s")), {
    date, user
  }, true);

  return <li className="thread-last-reply" dangerouslySetInnerHTML={{__html: message}}/>;
}

export default function(props) {
  return (
    <div className="header-stats">
      <div className="container">
        <ul className="list-inline">
          <Weight thread={props.thread} />
          <Unapproved thread={props.thread} />
          <IsHidden thread={props.thread} />
          <IsClosed thread={props.thread} />
          <Replies thread={props.thread} />
          <LastReply thread={props.thread} />
        </ul>
      </div>
    </div>
  );
}
/* jshint ignore:end */