import React from 'react'
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import Modal from 'react-modal'
import ModalSelect from './modal-select'
import difference from 'lodash/difference'
import pull from 'lodash/pull'
import ChangeCase from 'change-case'
import Admin from './../admin'
import Tools from './../../app/assets/javascripts/teachable/tools'
import { SelectModalStyles, EntityErrorsModalStyles } from './helpers/modal-styles'
import { fetchDataForNew, createEntity } from "../actions/index"
import { withExitPrompt } from './util/with-exit-prompt'

interface ScheduledTaskNewProps {
  banners: any[];
  blogPosts: any[];
  callback: any;
  createEntity: any;
  errors: string[];
  fetchDataForNew: any;
  pages: any[];
  redirects: any[];
  scheduledTasks: any[];
}

interface ScheduledTaskNewState extends ComponentState {
  banners: any[];
  blogPosts: any[];
  entitiesModalOpen: boolean;
  entityErrorsModalOpen: boolean;
  entityErrors: string[];
  pages: any[];
  redirects: any[];
  scheduledTask: any;
}

const properProperty = {
  "Banner": "name",
  "BlogPost": "title",
  "Page": "name",
  "Redirect": "url"
};

class ScheduledTaskNew extends React.Component<ScheduledTaskNewProps, ScheduledTaskNewState> {

  constructor(props) {
    super(props);
    this.state = {
      fetching: true,
      changesToSave: false,
      justSaved: false,
      scheduledTask: {
        schedulableType: "Page",
        action: "publish"
      },
      errors: [],
      entityErrors: [],
      entitiesModalOpen: false,
      entityErrorsModalOpen: false,
      pages: [],
      redirects: [],
      blogPosts: [],
      banners: []
    };
  }

  componentDidMount() {
    Admin.setUpNiceSelect({
      selector: 'select',
      func: Admin.changeField.bind(this, this.changeFieldArgs())
    });
    this.props.fetchDataForNew({ directory: "scheduled_tasks" }).then(() => {
      this.setState({
        fetching: false,
        banners: this.props.banners,
        pages: this.props.pages,
        blogPosts: this.props.blogPosts,
        redirects: this.props.redirects
      }, () => {
        Admin.resetNiceSelect({ selector: '.admin-modal select', func: Admin.changeField.bind(this, this.changeFieldArgs()) });
      });
    });
  }

  clickSave() {
    this.setState({
      fetching: true
    });
    this.props.createEntity({
      directory: "scheduled_tasks",
      entityName: "scheduledTask",
      entityNamePlural: "scheduledTasks",
      entity: this.state.scheduledTask,
      actionType: "SCHEDULED_TASKS_RECEIVED"
    }, "scheduled_tasks").then(() => {
      this.props.callback(this.props.scheduledTasks);
    }, () => {
      let errors = this.props.errors;
      let entityErrors = this.getEntityErrors(errors);
      let entityErrorsExist = entityErrors.length > 0;
      this.setState({
        fetching: false,
        errors,
        entityErrors,
        entityErrorsModalOpen: entityErrorsExist
      });
    });
  }

  changeFieldArgs() {
    return {
      thing: "scheduledTask",
      errorsArray: this.state.errors,
      beforeSave: (newThing, key, value) => {
        if (key == "schedulableType") {
          newThing["schedulableId"] = "";
          Admin.removeFieldError(this.state.errors, "schedulableId");
        }
      }
    }
  }

  schedulableName() {
    var id = parseInt(this.state.scheduledTask.schedulableId, 10);
    if (id) {
      switch (this.state.scheduledTask.schedulableType) {
        case "Banner":
          return this.state.banners.find(({ id: bannerId }) => id === bannerId).name;
        case "BlogPost":
          return this.state.blogPosts.find(({ id: postId }) => id === postId).title;
        case "Page":
          return this.state.pages.find(({ id: pageId }) => id === pageId).name;
        case "Redirect":
          const redirect = this.state.redirects.find(({ id: redirectId }) => id === redirectId);
          return `${redirect.url} → ${redirect.redirect}`;
        default:
          return null;
      }
    } else {
      return "(None)";
    }
  }

  properOptions() {
    switch (this.state.scheduledTask.schedulableType) {
      case "Banner":
        return this.state.banners;
        break;
      case "BlogPost":
        return this.state.blogPosts;
        break;
      case "Page":
        return this.state.pages;
        break;
      case "Redirect":
        return this.state.redirects;
        break;
      default:
        return null;
    }
  }

  closeModal() {
    this.setState({
      entitiesModalOpen: false,
      entityErrorsModalOpen: false
    });
  }

  selectEntity(e) {
    let scheduledTask = this.state.scheduledTask;
    scheduledTask.schedulableId = e.target.dataset.id;
    let errors = this.state.errors;
    pull(errors, "Schedulable can't be blank");
    this.setState({
      scheduledTask,
      errors,
      entitiesModalOpen: false
    });
  }

  getEntityErrors(errors) {
    let scheduledTaskErrors = Admin.errors.time.concat(Admin.errors.schedulableId);
    let entityErrors = difference(errors, scheduledTaskErrors);
    return entityErrors;
  }

  render() {
    let lowerCaseEntityName = ChangeCase.noCase(this.state.scheduledTask.schedulableType);
    let entityDirectory = `${ChangeCase.snakeCase(this.state.scheduledTask.schedulableType)}s`;
    return(
      <div id="scheduled-task-new" className="admin-modal">
        <div className="component details-component">
          <div className="white-box">
            { Admin.renderSpinner(this.state.fetching) }
            { Admin.renderGrayedOut(this.state.fetching) }
            <div className="row">
              <div className="col-xs-3">
                <h2>Time</h2>
                <input className={ Admin.errorClass(this.state.errors, Admin.errors.time) } onChange={ Admin.changeField.bind(this, this.changeFieldArgs()) } value={ this.state.scheduledTask.time || "" } data-field="time" placeholder="11/5/19 2:00 pm" />
                { Admin.renderModalFieldError(this.state.errors, Admin.errors.time) }
              </div>
              <div className="col-xs-2 dropdown-limit-3">
                <h2>Type</h2>
                <div className="clearfix">
                  <select onChange={ Admin.changeField.bind(this, this.changeFieldArgs()) } value={ this.state.scheduledTask.schedulableType } data-field="schedulableType">
                    <option value="Banner">Banner</option>
                    <option value="BlogPost">Blog Post</option>
                    <option value="Page">Page</option>
                    <option value="Redirect">Redirect</option>
                  </select>
                </div>
                { Admin.renderModalFieldError(this.state.errors, []) }
              </div>
              <div className="col-xs-5">
                <h2>{ Tools.unCamelCase(this.state.scheduledTask.schedulableType) }</h2>
                <input className={ Admin.errorClass(this.state.errors, Admin.errors.schedulableId) } readOnly={ true } value={ this.schedulableName() || "" } />
                { this.renderLink() }
                { Admin.renderModalFieldError(this.state.errors, []) }
              </div>
              <div className="col-xs-2">
                <h2>Action</h2>
                <div className="clearfix">
                  <select onChange={ Admin.changeField.bind(this, this.changeFieldArgs()) } value={ this.state.scheduledTask.action || "" } data-field="action">
                    <option value="publish">Publish</option>
                    <option value="unpublish">Unpublish</option>
                  </select>
                </div>
                { Admin.renderModalFieldError(this.state.errors, []) }
              </div>
            </div>
            { this.renderButton() }
          </div>
          <Modal isOpen={ this.state.entitiesModalOpen } onRequestClose={ this.closeModal.bind(this) } contentLabel="Modal" style={ SelectModalStyles }>
            <ModalSelect options={ this.properOptions()  } property={ properProperty[this.state.scheduledTask.schedulableType] } func={ this.selectEntity.bind(this) } />
          </Modal>
          <Modal isOpen={ this.state.entityErrorsModalOpen } onRequestClose={ this.closeModal.bind(this) } contentLabel="Modal" style={ EntityErrorsModalStyles }>
            <div className="entity-errors-warning">
              <h1>Ah crap!</h1>
              <div className="vertically-align-contents">
                <div>
                  <p>It looks like you're trying to schedule a { lowerCaseEntityName } that isn't publishable.</p>
                  <p>Please take a look at the errors below:</p>
                  <div className="entity-errors-list">
                    { this.state.entityErrors.map((error, index) => {
                      return(
                        <p key={ index }>{ error }</p>
                      );
                    })}
                  </div>
                  <p>To fix these errors, you can edit the { lowerCaseEntityName } by clicking <a target="_blank" href={ `/admin/${entityDirectory}/${this.state.scheduledTask.schedulableId}` }>here</a>.</p>
                </div>
              </div>
            </div>
          </Modal>
        </div>
      </div>
    );
  }

  renderLink() {
    return(
      <a className="link-below-field" onClick={ Admin.changeState.bind(this, "entitiesModalOpen", true) }>{ `Select ${Tools.unCamelCase(this.state.scheduledTask.schedulableType)}` }</a>
    );
  }

  renderButton() {
    return(
      <div>
        <a className={ "orange-button standard-button-width btn" + Admin.renderDisabledButtonClass(this.state.fetching) } onClick={ this.clickSave.bind(this) }>
          Add Scheduled Task
        </a>
      </div>
    );
  }
}

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

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchDataForNew, createEntity }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(withExitPrompt(ScheduledTaskNew));