import ModalInput from './ModalInput';
import ModalSelect from './ModalSelect';

class ModalForm extends React.Component {
  constructor (props) {
    super(props);

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleFilterChange = this.handleFilterChange.bind(this);
  }

  isNewWidget (widgetIndex) {
    // Default index is -1, indicating newly created widget,
    // otherwise edit existing widget
    return widgetIndex === -1;
  }

  preventSubmit (event) {
    event.preventDefault();
  }

  handleFilterChange (event) {
    this.props.updateFilter(event.target.value);
  }

  handleSubmit (event) {
    const { addWidget, editWidget, newWidget } = this.props;

    event.preventDefault();
    // newWidget state updates on blur, so focus submit button in case an input
    // is still selected on form submit
    this.submitButton.focus();

    if (this.isNewWidget(newWidget.index)) {
      addWidget(newWidget);
    } else {
      editWidget(newWidget);
    }
  }

  render () {
    const {
      chartType,
      groups,
      columns,
      selectedGroup,
      newWidget,
      updateWidget,
      modalId } = this.props;
    const { name, viewId, startDate, endDate, index } = newWidget;
    const btnLabel = this.isNewWidget(index) ? 'Add Widget' : 'Edit Widget';

    return (
      <div className="modal fade" id={modalId} tabIndex="-1" role="dialog">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 className="modal-title">
                Configure {chartType.name} Widget
              </h4>
            </div>
            <div className="modal-body">
              <form
                id={`${modalId}-form`}
                ref={form => {
                  this.modalForm = form;
                }}>

                <ModalInput
                  type="text"
                  label="name"
                  modalId={modalId}
                  value={name}
                  updateWidget={updateWidget} />
                <ModalInput
                  type="number"
                  label="viewId"
                  modalId={modalId}
                  value={viewId}
                  updateWidget={updateWidget} />

                <div className="form-group">
                  <label htmlFor="widget-select-group">
                    {chartType.name} Dimension/Metric Group Filter
                  </label>
                  <select
                    className="form-control"
                    id="widget-select-group"
                    onChange={this.handleFilterChange}>
                    <option value="" key="0">All Groups</option>
                    {
                      groups.map((group, index) => {
                        return (
                          <option value={group} key={index}>{group}</option>
                        );
                      })
                    }
                  </select>
                </div>

                < ModalSelect
                  type="DIMENSION"
                  label="dimensions"
                  modalId={modalId}
                  columns={columns}
                  selectedGroup={selectedGroup}
                  newWidget={newWidget}
                  updateWidget={updateWidget} />
                < ModalSelect
                  type="METRIC"
                  label="metrics"
                  modalId={modalId}
                  columns={columns}
                  selectedGroup={selectedGroup}
                  newWidget={newWidget}
                  updateWidget={updateWidget} />

                < ModalInput
                  type="date"
                  label="startDate"
                  modalId={modalId}
                  value={startDate}
                  updateWidget={updateWidget} />
                < ModalInput
                  type="date"
                  label="endDate"
                  modalId={modalId}
                  value={endDate}
                  updateWidget={updateWidget} />

                <input
                  type="submit"
                  className="btn btn-primary"
                  value={btnLabel}
                  data-toggle="modal"
                  data-target={`#${modalId}`}
                  onClick={this.handleSubmit}
                  ref={button => {
                    this.submitButton = button;
                  }} />
              </form>

            </div>
          </div>
        </div>
      </div>
    );
  }
}

ModalForm.propTypes = {
  chartType: React.PropTypes.object.isRequired,
  modalId: React.PropTypes.string.isRequired,
  updateFilter: React.PropTypes.func.isRequired,
  addWidget: React.PropTypes.func.isRequired,
  editWidget: React.PropTypes.func.isRequired,
  updateWidget: React.PropTypes.func.isRequired,
  groups: React.PropTypes.array.isRequired,
  columns: React.PropTypes.array.isRequired,
  selectedGroup: React.PropTypes.string,
  newWidget: React.PropTypes.object.isRequired
};

export default ModalForm;
