import React from 'react';
import { Link } from 'react-router-dom';

import { admin as adminApi } from '@devcms/sdk';
import { connect } from 'react-redux';

class TagsList extends React.Component {
  state = {
    tags: null,
    entries: null
  };

  componentDidMount() {
    this.fetchTags();
    this.fetchEntries();
  }

  fetchTags() {
    adminApi.tags.list()
      .then(tags => this.setState({ tags: tags }));
  }

  fetchEntries() {
    adminApi.entries.list()
      .then(entries => this.setState({ entries: entries }));
  }

  renderEmpty() {
    return (
      <div className="box box-center">
        <div className="box-content">
          <h2>You have no tags yet!</h2>
          <br/>
          <p>Click on the button below to create new tag</p>
          <br/>
          <Link to={`/tags/new`} className="btn btn-blue">Create new tag</Link>
        </div>
      </div>
    );
  }

  renderTagsCount(tag) {

    let count = 0;

    this.state.entries.map((entry, index) => {
      if (entry.tags.length > 0) {

        count += entry.tags.reduce((acc, cur) => {

          if (cur === tag.title) {
            acc += 1;
          }

          return acc;
        }, 0)
      }
    });

    return <div>{count}</div>;
  }

  renderList() {
    if (!this.state.tags.length) {
      return this.renderEmpty();
    }

    return (
      <React.Fragment>
        <div className="box box-card">
          <div className="box-header">
            <div className="columns">
              <div className="column-4">
                <div className="box-title">
                  <div className="box-cell">Tag</div>
                </div>
              </div>
              <div className="column-4">
                <div className="box-title">
                  <div className="box-cell">Slug</div>
                </div>
              </div>
              <div className="column-4">
                <div className="box-title">
                  <div className="box-cell box-cell-right">Number of entries</div>
                </div>
              </div>
            </div>
          </div>
          <div className="box-table">
            {this.state.tags.map((tag, index) => {
              return (
                <div key={index} className="box-row">
                  <div className="columns align-center">
                    <div className="column-4">
                      <div className="box-cell">
                        <div className="box-title">{tag.title}</div>
                        <div className="box-cell-subfields box-cell-subfields-actions">
                          <Link to={`/tags/${tag.id}`}>Edit</Link>
                        </div>
                      </div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell">{tag.slug}</div>
                    </div>
                    <div className="column-4">
                      <div className="box-cell box-cell-right">
                        {this.renderTagsCount(tag)}
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="box-footer">
            <Link to="/tags/new" className="btn btn-blue">Add new tag</Link>
          </div>
        </div>
      </React.Fragment>
    );
  }

  render() {
    if (this.state.tags === null || this.state.entries === null) {
      return null;
    }

    return (
      <React.Fragment>
        <div className="title title-action">
          <Link to="/tags/new" className="btn btn-blue">Add new tag</Link>
          <div>
            <h1>All tags</h1>
            <p>List of all defined tags.</p>
          </div>
        </div>
        {this.renderList()}
      </React.Fragment>
    );
  }
}

export default connect(
  (state) => ({
    site: state.site
  })
)(TagsList)
