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

import ListEntry from './list/Entry';

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

class EntryList extends React.Component {
  state = {
    entries: null,
    loaded: false,
    prevType: null
  };

  entryType = {};

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.match.params.type !== prevState.prevType) {
      return {
        entries: null,
        prevType: nextProps.match.params.type
      };
    }

    return null;
  }

  componentDidMount() {
    this.fetchEntries();
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.entries === null) {
      this.fetchEntries();
    }
  }

  fetchEntries() {
    const { match: { params: { type } } } = this.props;
    this.type = type;
    this.entryType = this.props.site.schema.entries[type];

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

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

    return (
      <div className="box box-card">
        <div className="box-header">
          <div className="columns">
            <div className="column-7">
              <div className="box-title">
                <div className="box-cell">Title</div>
              </div>
            </div>
            <div className="column-2">
              <div className="box-title">
                <div className="box-cell">Status</div>
              </div>
            </div>
            <div className="column-3">
              <div className="box-title">
                <div className="box-cell">Publish Date</div>
              </div>
            </div>
          </div>
        </div>
        <div className="box-table">
          {this.state.entries.map((entry, index) => {
            return <ListEntry entry={entry} key={index} onDelete={this.fetchEntries.bind(this)} />
          })}
        </div>
        <div className="box-footer">
          <Link to={`/entries/${this.type}/new`} className="btn btn-blue">Add new {this.entryType.title.toLowerCase()}</Link>
        </div>
      </div>
    );
  }

  renderEmpty() {
    return (
      <div className="box box-center">
        <div className="box-content">
          <h2>You have no {this.entryType.plural.toLowerCase()} yet!</h2>
          <br/>
          <p>Click on the button below to create new {this.entryType.title.toLowerCase()}</p>
          <br/>
          <Link to={`/entries/${this.type}/new`} className="btn btn-blue">Create new {this.entryType.title.toLowerCase()}</Link>
        </div>
      </div>
    );
  }

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

    return (
      <React.Fragment>
        <div className="title title-action">
          <Link to={`/entries/${this.type}/new`} className="btn btn-blue">Add new {this.entryType.title.toLowerCase()}</Link>
          <div>
            <h1>{this.entryType.plural}</h1>
            <p>{this.entryType.desc}</p>
          </div>
        </div>
        {this.renderList()}
      </React.Fragment>
    );
  }
}

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