import React from 'react';
import { connect } from 'react-redux';
import Cookies from 'js-cookie';

import { unSelectPost, markPostRead, toggleSaved } from '../actions/posts.js';
import { SAVED_TYPE } from '../constants.js';
import { formatDatetime } from '../../../utils.js';

class PostModal extends React.Component {
  readTimer = null;

  componentDidMount() {
    const post = { ...this.props.post };
    const markPostRead = this.props.markPostRead;
    const token = Cookies.get('csrftoken');

    if (this.props.autoMarking && this.props.selectedType != SAVED_TYPE && !post.read) {
      this.readTimer = setTimeout(markPostRead, 3000, post, token);
    }

    window.addEventListener('click', this.modalListener);
  }

  componentWillUnmount() {
    if (this.readTimer) {
      clearTimeout(this.readTimer);
    }

    this.readTimer = null;

    window.removeEventListener('click', this.modalListener);
  }

  modalListener = e => {
    const targetClassName = e.target.className;

    if (this.props.post && targetClassName == 'modal post-modal') {
      this.props.unSelectPost();
    }
  };

  render() {
    const post = this.props.post;
    const token = Cookies.get('csrftoken');
    const publicationDate = formatDatetime(post.publicationDate);
    const titleClassName = post.read ? 'post__title post__title--read' : 'post__title';
    const readButtonDisabled =
      post.read || this.props.isUpdating || this.props.selectedType === SAVED_TYPE;
    const savedIconClass = post.saved
      ? 'post__save post__save--saved saved-icon saved-icon--saved'
      : 'post__save saved-icon';

    let ruleUrl = '';

    switch (this.props.rule.type) {
      default:
        ruleUrl = `${this.props.feedUrl}/${this.props.rule.id}/`;
        break;
    }

    return (
      <div className="modal post-modal">
        <div className="post">
          <div className="post__container">
            <div className="post__header">
              <div className="post__actions">
                <button
                  className={`button read-button ${readButtonDisabled &&
                    'button--disabled'}`}
                  onClick={() =>
                    !readButtonDisabled && this.props.markPostRead(post, token)
                  }
                >
                  <i className="fas fa-check" /> Mark as read
                </button>
                <button
                  className="button post__close-button"
                  onClick={() => this.props.unSelectPost()}
                >
                  <i className="fas fa-times"></i> Close
                </button>
              </div>
              <div className="post__heading">
                <h2 className={titleClassName}>{`${post.title} `}</h2>
                <div className="post__meta">
                  <div className="post__text">
                    <span className="post__date">{publicationDate}</span>
                    {post.author && <span className="post__author">{post.author}</span>}
                  </div>

                  <div className="post__buttons">
                    {this.props.category && (
                      <span
                        className="badge post__category"
                        title={this.props.category.name}
                      >
                        <a
                          href={`${this.props.categoriesUrl}/${this.props.category.id}/`}
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          {this.props.category.name}
                        </a>
                      </span>
                    )}
                    <span className="badge post__rule" title={this.props.rule.name}>
                      <a href={ruleUrl} target="_blank" rel="noopener noreferrer">
                        {this.props.rule.name}
                      </a>
                    </span>
                    <a
                      className="post__link"
                      href={post.url}
                      target="_blank"
                      rel="noopener noreferrer"
                    >
                      <i className="fas fa-external-link-alt" />
                    </a>
                    <span
                      className={savedIconClass}
                      onClick={() => this.props.toggleSaved(post, token)}
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* HTML is sanitized by the collectors */}
          <div className="post__body" dangerouslySetInnerHTML={{ __html: post.body }} />
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  unSelectPost: () => dispatch(unSelectPost()),
  markPostRead: (post, token) => dispatch(markPostRead(post, token)),
  toggleSaved: (post, token) => dispatch(toggleSaved(post, token)),
});

const mapStateToProps = state => ({
  isUpdating: state.posts.isUpdating,
});

export default connect(mapStateToProps, mapDispatchToProps)(PostModal);
