/**
 *
 * Toggle
 *
 */
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import { Toggle as StyledToggle, ToggleWrapper } from '@buffetjs/styles';
import Label from '../Label';

function Toggle(_ref) {
  var disabled = _ref.disabled,
      id = _ref.id,
      className = _ref.className,
      name = _ref.name,
      onChange = _ref.onChange,
      value = _ref.value;
  var isIndeterminate = value === null;
  var handleRef = useCallback(function (element) {
    if (element) {
      element.indeterminate = isIndeterminate; // eslint-disable-line no-param-reassign
    }
  }, [isIndeterminate]);

  var handleChange = function handleChange(e) {
    var targetValue = e.target.checked; // Handle click when the state is inteterminate

    if (isIndeterminate) {
      // Select the right value depending on the mouse position
      targetValue = e.nativeEvent.offsetX >= e.target.offsetWidth / 2;
    }

    onChange({
      target: {
        name: name,
        value: targetValue
      }
    });
  };

  return /*#__PURE__*/React.createElement(ToggleWrapper, {
    className: className
  }, /*#__PURE__*/React.createElement(Label, {
    htmlFor: id || name
  }, /*#__PURE__*/React.createElement(StyledToggle, {
    disabled: disabled,
    checked: value || false,
    id: id || name,
    name: id || name,
    onChange: handleChange,
    ref: handleRef
  }), /*#__PURE__*/React.createElement("span", null, "OFF"), /*#__PURE__*/React.createElement("span", null, "ON")));
}

Toggle.defaultProps = {
  className: null,
  disabled: false,
  id: null,
  onChange: function onChange() {},
  value: false
};
Toggle.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  onChange: PropTypes.func,
  value: PropTypes.bool
};
export default Toggle;