import React from 'react';
import { Link } from 'react-router-dom';
import { admin as adminApi } from '@devcms/sdk';
import { connect } from 'react-redux';
import { showError, showSuccess } from '../../../../actions/notice';

import moment from 'moment';

class ListEntry extends React.Component {

  state= {
    show: false,
    entry: null
  };

  constructor(props) {
    super(props);

    this.state.entry = props.entry;
  }

  handleDelete() {
    this.delete();
  }

  delete() {
    adminApi.entries.delete(this.state.entry.id).then(() => {
      this.setState({ entry: null });
    }).catch(error => this.props.showError('Error occurred while deleting record.'));
  }

  onToggle() {
    this.setState({ show: !this.state.show });
  }

  renderDeleteButton() {
    return <button type="button" className="btn-reset" onClick={this.onToggle.bind(this)}>Delete</button>;
  }

  renderDeletePopup() {
    if (!this.state.show) {
      return;
    }

    return (
      <div className="popup">
        <div className="box box-center-narrow box-card">
          <div className="box-content">
            <h3>Are you sure that you want to delete this {this.state.entry.title}?</h3>
          </div>
          <div className="box-footer">
            <div>
              <button type="button" className="btn btn-blue" onClick={this.onToggle.bind(this)}>Cancel</button>
              <button type="button" className="btn btn-red" onClick={this.handleDelete.bind(this)}>Delete</button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  renderUpdateStatusButton() {
    if (this.state.entry.status === 'published') {
      return null;
    }

    return <button className="btn-reset" onClick={this.updateStatus.bind(this)}>Publish</button>
  }

  updateStatus() {
    adminApi.entries.update(this.state.entry.id, {
      status: 'published',
    }).then(entry => {
      this.setState({ entry: entry });

      this.props.showSuccess(`${this.state.entry.title} status has changed to published`);
    }).catch(error => this.props.showError('Something went wrong. You can not change status right now. Please try again later.'));
  }

  render() {
    if (!this.state.entry) {
      return null;
    }

    return (
      <div className="box-row">
        <div className="columns align-center">
          <div className="column-7">
            <div className="box-cell box-cell-left">
              <Link to={`/entries/${this.state.entry.type}/${this.state.entry.id}`} className="box-title">{this.state.entry.title}</Link>
              <div className="box-cell-subfields box-cell-subfields-actions">
                <Link to={`/entries/${this.state.entry.type}/${this.state.entry.id}`}>Edit</Link>
                {this.renderDeleteButton()}
                {this.renderUpdateStatusButton()}
              </div>
            </div>
          </div>
          <div className="column-2">
            <div className="box-cell box-cell-left">
              <div className={`badge-status badge-status-${this.state.entry.status}`}>{this.state.entry.status}</div>
            </div>
          </div>
          <div className="column-3">
            <div className="box-cell box-cell-left">
              {moment(this.state.entry.published_at).format('MMM Do Y')}
              <div className="box-cell-subfields">Updated at: {moment(this.state.entry.updated_at).format('MMM Do Y')}</div>
            </div>
          </div>
        </div>
        {this.renderDeletePopup()}
      </div>
    );
  }
}

export default connect(
  null,
  { showError, showSuccess }
)(ListEntry);
