import React from 'react';
import { Trans } from 'react-i18next';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { getAutoSubmit } from '../../selectors/authSelectors';
import * as userActions from '../../actions/userActions';

function mapStateToProps(state, props) {

  const autoSubmit = getAutoSubmit(state);

  return {
    autoSubmit,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    userActions: bindActionCreators(userActions, dispatch)
  }
}

// see https://github.com/facebook/react/issues/3005 for explanation about the timeout.
const ToolbarCheckbox = connect(mapStateToProps, mapDispatchToProps)(({ autoSubmit, userActions }) => (
  <div className="checkbox float-right">
    <label className="mr-2">
      <input type="checkbox" checked={autoSubmit} onChange={(e) => { setTimeout(userActions.setAutoSubmit, 0, e.target.checked) }} value="enterBox" /><small className="text-muted ml-1"><Trans i18nKey="slate_editor.press_enter_msg">Appuyer sur <kbd className="bg-irinotes-form text-muted ml-1">Entrée</kbd> pour ajouter une note</Trans></small>
    </label>
  </div>
));

export default ({ hasNote, isButtonDisabled, submitNote }) => (
  <div>
    <button type="button" id="btn-editor" className="btn btn-primary btn-sm text-secondary font-weight-bold float-right text-capitalize" disabled={isButtonDisabled} onClick={submitNote}>
      { hasNote ? <Trans i18nKey="common.save">Save</Trans> : <Trans i18nKey="common.add">Add</Trans> }
    </button>
    { !hasNote && <ToolbarCheckbox /> }
  </div>
);