import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
import { jsx } from '@emotion/core';
import { forwardRef, Fragment } from 'react';
import 'prop-types';
import { visuallyHiddenCss } from '../../stylesheets/a11y.esm.js';
import ToggleGutter, { toggleGutterCheckedCss, ToggleGutterTagName, toggleGutterFocusCss } from './ToggleGutter.esm.js';
import { toggleLabelCss } from './Toggle.styles.esm.js';

var BaseToggle = forwardRef(function BaseToggle(_ref, ref) {
  var tone = _ref.tone,
      className = _ref.className,
      style = _ref.style,
      rest = _objectWithoutProperties(_ref, ["tone", "className", "style"]);

  return jsx(Fragment, null, jsx("input", _extends({
    ref: ref,
    type: "checkbox",
    value: "true",
    css: function css(theme) {
      var _ref2;

      return [visuallyHiddenCss, (_ref2 = {}, _defineProperty(_ref2, "&:checked + ".concat(ToggleGutterTagName), toggleGutterCheckedCss(tone)(theme)), _defineProperty(_ref2, "&:focus + ".concat(ToggleGutterTagName), toggleGutterFocusCss(theme)), _ref2)];
    }
  }, rest)), jsx(ToggleGutter, {
    className: className,
    style: style
  }));
});
var ToggleCheckbox = forwardRef(function ToggleCheckbox(_ref3, ref) {
  var id = _ref3.id,
      label = _ref3.label,
      _ref3$labelPosition = _ref3.labelPosition,
      labelPosition = _ref3$labelPosition === void 0 ? "end" : _ref3$labelPosition,
      className = _ref3.className,
      style = _ref3.style,
      rest = _objectWithoutProperties(_ref3, ["id", "label", "labelPosition", "className", "style"]);

  return jsx("label", {
    className: className,
    style: style,
    htmlFor: id,
    css: function css(theme) {
      return [{
        display: "flex",
        alignItems: "center"
      }, toggleLabelCss(theme)];
    }
  }, jsx(BaseToggle, _extends({
    ref: ref,
    id: id
  }, rest, {
    css: function css(theme) {
      return labelPosition === "end" ? {
        marginRight: theme.space[3]
      } : {
        marginLeft: theme.space[3],
        order: 1
      };
    }
  })), label);
});

export default ToggleCheckbox;
//# sourceMappingURL=ToggleCheckbox.esm.js.map
