import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Admin from './../admin'
import { copyWebinar } from '../actions/index'

interface WebinarCopyPropsType {
  copyWebinar: any;
  errors: string[];
  webinar: any;
}

interface WebinarCopyStateType {
  fetching: boolean;
  webinar: {
    name: string,
    url: string
  };
  errors: string[];
}

class WebinarCopy extends React.Component<WebinarCopyPropsType, WebinarCopyStateType> {

  constructor(props) {
    super(props);
    this.state = {
      fetching: false,
      webinar: {
        name: "",
        url: ""
      },
      errors: []
    }
  }

  changeFieldArgs() {
    return {
      thing: "webinar",
      errorsArray: this.state.errors
    }
  }

  clickSave() {
    this.setState({
      fetching: true
    });
    this.props.copyWebinar({
      oldWebinarId: window.location.pathname.split("/")[3],
      newWebinar: this.state.webinar
    }).then(() => {
      window.location.href = `/admin/webinars/${this.props.webinar.id}`;
    }, () => {
      this.setState({
        fetching: false,
        errors: this.props.errors
      });
    });
  }

  render() {
    return(
      <div id="webinar-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 first-row">
              <div className="col-xs-6">
                <h2>New Name (Internal)</h2>
                <input className={ Admin.errorClass(this.state.errors, Admin.errors.name) } onChange={ Admin.changeField.bind(this, this.changeFieldArgs()) } value={ this.state.webinar.name } data-field="name" placeholder="7 Steps" />
                { Admin.renderModalFieldError(this.state.errors, Admin.errors.name) }
              </div>
              <div className="col-xs-6">
                <h2>New Url</h2>
                <input className={ Admin.errorClass(this.state.errors, Admin.errors.url) } onChange={ Admin.changeField.bind(this, this.changeFieldArgs()) } value={ this.state.webinar.url } data-field="url" placeholder="7-steps-to-launch" />
                { Admin.renderModalFieldError(this.state.errors, Admin.errors.url) }
              </div>
            </div>
            <a className={ "orange-button" + Admin.renderDisabledButtonClass(this.state.fetching) } onClick={ this.clickSave.bind(this) }>
              Copy
            </a>
          </div>
        </div>
      </div>
    )
  }

  componentDidUpdate() {
    Admin.resetNiceSelect({
      selector: '#webinar-new select',
      func: Admin.changeField.bind(this, this.changeFieldArgs())
    });
  }
}

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

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

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