function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import cx from 'classnames';
import { isBoolean } from 'lodash';
import uuid from 'uuid';
import Icon from '../Icon';
import MarkdownLabel from './MarkdownLabel';

class Toggle extends PureComponent {
  constructor(props) {
    super(props);
    this.id = uuid();
    const {
      input: {
        value,
        onChange
      }
    } = this.props; // Because redux forms will just not pass on this
    // field if it was never touched and we need it to
    // return `false`.

    if (!isBoolean(value)) {
      onChange(false);
    }
  }

  render() {
    const {
      label,
      fieldLabel,
      className,
      input,
      disabled,
      title,
      meta: {
        error,
        invalid,
        touched
      },
      ...rest
    } = this.props;
    const containerClassNames = cx('form-field-container', {
      'form-field-toggle--has-error': invalid && touched && error
    });
    const componentClasses = cx('form-field', 'form-field-toggle', className, {
      'form-field-toggle--disabled': disabled,
      'form-field-toggle--has-error': invalid && touched && error
    });
    return /*#__PURE__*/React.createElement("div", {
      className: containerClassNames,
      name: input.name
    }, fieldLabel && /*#__PURE__*/React.createElement(MarkdownLabel, {
      label: fieldLabel
    }), /*#__PURE__*/React.createElement("label", {
      className: componentClasses,
      htmlFor: this.id,
      title: title
    }, /*#__PURE__*/React.createElement("input", _extends({
      className: "form-field-toggle__input",
      id: this.id // eslint-disable-next-line react/jsx-props-no-spreading

    }, input, rest, {
      checked: !!input.value,
      disabled: disabled,
      type: "checkbox",
      value: "true"
    })), /*#__PURE__*/React.createElement("div", {
      className: "form-field-toggle__toggle"
    }, /*#__PURE__*/React.createElement("span", {
      className: "form-field-toggle__button"
    })), label && /*#__PURE__*/React.createElement(MarkdownLabel, {
      inline: true,
      label: label,
      className: "form-field-inline-label"
    })), invalid && touched && /*#__PURE__*/React.createElement("div", {
      className: "form-field-toggle__error"
    }, /*#__PURE__*/React.createElement(Icon, {
      name: "warning"
    }), error));
  }

}

Toggle.propTypes = {
  label: PropTypes.string,
  title: PropTypes.string,
  fieldLabel: PropTypes.string,
  className: PropTypes.string,
  disabled: PropTypes.bool,
  input: PropTypes.object.isRequired,
  meta: PropTypes.object
};
Toggle.defaultProps = {
  className: '',
  label: null,
  title: '',
  fieldLabel: null,
  disabled: false,
  meta: {}
};
export default Toggle;