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

function ToggleSwitch(_ref) {
  var id = _ref.id,
      valueOn = _ref.valueOn,
      valueOff = _ref.valueOff,
      labelOn = _ref.labelOn,
      labelOff = _ref.labelOff,
      _ref$value = _ref.value,
      value = _ref$value === void 0 ? valueOff : _ref$value,
      tone = _ref.tone,
      className = _ref.className,
      style = _ref.style,
      rest = _objectWithoutProperties(_ref, ["id", "valueOn", "valueOff", "labelOn", "labelOff", "value", "tone", "className", "style"]);

  var inputOnRef = useRef(null);
  var inputOffRef = useRef(null);
  var optionOnId = "".concat(id, "__on");
  var optionOffId = "".concat(id, "__off");
  var isOn = value === valueOn;

  var toggle = function toggle() {
    var inputOn = inputOnRef.current;
    var inputOff = inputOffRef.current;

    if (!inputOn || !inputOff) {
      return;
    }

    if (isOn) {
      inputOff.focus();
      inputOff.click();
    } else {
      inputOn.focus();
      inputOn.click();
    }
  };

  return jsx("div", {
    id: id,
    className: className,
    style: style,
    css: function css(theme) {
      return [_defineProperty({
        display: "flex",
        alignItems: "center"
      }, "&:focus-within > ".concat(ToggleGutterTagName), toggleGutterFocusCss(theme)), toggleLabelCss(theme)];
    },
    onClick: function onClick(e) {
      if (!inputOnRef.current || !inputOffRef.current) {
        return;
      }

      var target = e.target;

      if (target.tagName === "LABEL") {
        var inputOn = inputOnRef.current;
        var inputOff = inputOffRef.current;
        var labelFor = target.htmlFor;

        if (labelFor === optionOnId && isOn) {
          e.preventDefault();
          inputOff.focus();
          inputOff.click();
        }

        if (labelFor === optionOffId && !isOn) {
          e.preventDefault();
          inputOn.focus();
          inputOn.click();
        }
      } else if (target.tagName === ToggleGutterTagName.toUpperCase()) {
        toggle();
      }
    },
    onKeyPress: function onKeyPress(e) {
      if (e.key !== " ") {
        return;
      }

      toggle();
    }
  }, jsx("input", _extends({
    type: "radio",
    id: optionOffId,
    name: id,
    value: valueOff,
    checked: !isOn,
    css: visuallyHiddenCss,
    ref: inputOffRef
  }, rest)), jsx("label", {
    htmlFor: optionOffId
  }, labelOff), jsx(ToggleGutter, {
    css: function css(theme) {
      return [{
        marginLeft: theme.space[3],
        marginRight: theme.space[3]
      }, isOn && toggleGutterCheckedCss(tone)(theme)];
    }
  }), jsx("input", _extends({
    type: "radio",
    id: optionOnId,
    name: id,
    value: valueOn,
    checked: isOn,
    css: visuallyHiddenCss,
    ref: inputOnRef
  }, rest)), jsx("label", {
    htmlFor: optionOnId
  }, labelOn));
}
ToggleSwitch.propTypes = {
  id: _pt.string.isRequired,
  value: _pt.string.isRequired,
  valueOn: _pt.string.isRequired,
  valueOff: _pt.string.isRequired,
  labelOn: _pt.node.isRequired,
  labelOff: _pt.node.isRequired,
  className: _pt.string
};
ToggleSwitch.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ToggleSwitch",
  "props": {
    "value": {
      "defaultValue": {
        "value": "valueOff",
        "computed": true
      },
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "id": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "valueOn": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "valueOff": {
      "required": true,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "labelOn": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "labelOff": {
      "required": true,
      "tsType": {
        "name": "ReactReactNode",
        "raw": "React.ReactNode"
      },
      "description": ""
    },
    "tone": {
      "required": false,
      "tsType": {
        "name": "AtomTone"
      },
      "description": ""
    },
    "className": {
      "required": false,
      "tsType": {
        "name": "string"
      },
      "description": ""
    },
    "style": {
      "required": false,
      "tsType": {
        "name": "ReactCSSProperties",
        "raw": "React.CSSProperties"
      },
      "description": ""
    }
  }
};

if (typeof STORYBOOK_REACT_CLASSES !== "undefined") {
  STORYBOOK_REACT_CLASSES["src/components/Toggle/ToggleSwitch.tsx"] = {
    name: "ToggleSwitch",
    docgenInfo: ToggleSwitch.__docgenInfo,
    path: "src/components/Toggle/ToggleSwitch.tsx"
  };
}

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