import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import ChangeCase from 'change-case'
import isEmpty from 'lodash/isEmpty';
import Admin from '../admin'
import { fetchEntities } from '../actions/index'

type VoidFunc = () => void

interface ConfirmDeleteProps {
  closeAndFetch?: VoidFunc;
  closeModal?: VoidFunc;
  delete?: VoidFunc;
  entityDirectory?: string;
  entityId?: number;
  entityName?: string;
  fetchEntities: any;
  issues: string[];
  message: any;
  skipCheck?: boolean;
}

interface ConfirmDeleteState {
  fetching: boolean;
  status: string;
  issues: any[];
  message: any;
}

class ConfirmDelete extends React.Component<ConfirmDeleteProps, ConfirmDeleteState> {

  constructor(props) {
    super(props);
    this.state = {
      fetching: !this.props.skipCheck,
      status: (this.props.skipCheck ? 'confirm' : 'fetching'),
      issues: [],
      message: {}
    };
  }

  componentDidMount() {
    if (!this.props.skipCheck) {
      this.props.fetchEntities({
        directory: `check_delete/${this.props.entityDirectory}/${this.props.entityId}`
      }).then(() => {
        let issues = this.props.issues || [];
        let message = this.props.message || {};
        let status = (!isEmpty(message) || issues.length > 0 ? 'issues' : 'confirm');
        this.setState({
          fetching: false,
          issues,
          message,
          status
        });
      });
    }
  }

  clickConfirm() {
    this.props.closeAndFetch();
    this.props.delete();
  }

  render() {
    let entityText = ChangeCase.lowerCase(ChangeCase.sentenceCase(this.props.entityName));
    switch (this.state.status) {
      case 'fetching':
        return(
          <div className="confirm-delete">
            { Admin.renderSpinner() }
          </div>
        );
      case 'issues':
        if (this.state.message.header) {
          return(
            <div className="confirm-delete">
              <h1>{ this.state.message.header }</h1>
              <p>{ this.state.message.subheader }</p>
            </div>
          );
        } else {
          return(
            <div className="confirm-delete">
              <h1>You cannot delete this { entityText } because it is in use by the below:</h1>
              { this.state.issues.map((issue, index) => {
                return(
                  <p key={ index }>{ issue }</p>
                );
              }) }
            </div>
          );
        }
      case 'confirm':
        return(
          <div className="confirm-delete">
            <h1>Are you sure you want to permanently delete this { entityText }&#63;</h1>
            Deleting a { entityText } will erase ALL of its information and data<br />
            <a className="orange-button" onClick={ this.clickConfirm.bind(this) }>
              Yes
            </a>
            <a className="light-orange-button" onClick={ this.props.closeModal }>
              No
            </a>
          </div>
        );
      default:
        return null;
    }
  }
}

const mapStateToProps = (reducers, props) => {
  return reducers.standardReducer;
};

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchEntities }, dispatch);
}

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