import React, { useRef } from 'react';
import 'react-dom';
import '../_rollupPluginBabelHelpers-b9ad31fa.js';
import PropTypes from 'prop-types';
import 'styled-components';
import '../key_codes-ff72266d.js';
import '../hooks/useActivify.js';
import '../index-6829ab1f.js';
import '@styled-system/space';
import '@styled-system/color';
import '@styled-system/border';
import '@styled-system/variant';
import '@styled-system/typography';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import '../index-fc484d02.js';
import '../overlays/withTooltip.js';
import { C as Context } from '../index-155df85b.js';
import '../ui/text.js';
import '@styled-system/layout';
import '@styled-system/flexbox';
import '@styled-system/position';
import '@styled-system/shadow';
import '../ui/box.js';
import { c as cc } from '../index-b65fa23c.js';
import { r as rgba } from '../generic-7099c3ed.js';
import { u as useInput } from '../useInput-87c61cca.js';
import { Label } from '../ui/label.js';

var css_248z = ".Toggle_toggle__3Tgas {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer; }\n\n.Toggle_toggleLabel__2K9GQ {\n  color: #555;\n  font-size: 14px;\n  font-weight: 600; }\n\n.Toggle_toggleInput__1v8hM {\n  width: 36px;\n  height: 24px;\n  border-radius: 24px;\n  border: 1px solid #ddd;\n  transition: 0.1s ease-out;\n  outline: none; }\n  .Toggle_toggleInput__1v8hM.Toggle_redGreen__17kCI {\n    background-color: rgba(244, 67, 54, 0.2);\n    border-color: #f44336; }\n    .Toggle_toggleInput__1v8hM.Toggle_redGreen__17kCI.Toggle_active__3tGLu {\n      background-color: rgba(76, 175, 80, 0.2);\n      border-color: #4caf50; }\n\n.Toggle_toggleInputKnob__3M2Sb {\n  width: 18px;\n  height: 18px;\n  margin-top: 2px;\n  margin-left: 2px;\n  border-radius: 12px;\n  background-color: #ddd;\n  border: 1px solid #bbb;\n  transform: translate3d(0, 0, 0);\n  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);\n  transition: 0.1s ease-out; }\n  .Toggle_toggleInputKnob__3M2Sb.Toggle_active__3tGLu {\n    transform: translate3d(60%, 0, 0); }\n  .Toggle_toggleInputKnob__3M2Sb.Toggle_redGreen__17kCI {\n    background-color: #f44336;\n    border-color: #f33123; }\n    .Toggle_toggleInputKnob__3M2Sb.Toggle_redGreen__17kCI.Toggle_active__3tGLu {\n      background-color: #4caf50;\n      border-color: #46a149; }\n\n.Toggle_disabled__33wVP {\n  opacity: 0.4; }\n\n.Toggle_active__3tGLu {\n  opacity: 1; }\n";
var styles = {"toggle":"Toggle_toggle__3Tgas","toggleLabel":"Toggle_toggleLabel__2K9GQ","toggleInput":"Toggle_toggleInput__1v8hM","redGreen":"Toggle_redGreen__17kCI","active":"Toggle_active__3tGLu","toggleInputKnob":"Toggle_toggleInputKnob__3M2Sb","disabled":"Toggle_disabled__33wVP"};
styleInject(css_248z);

var Toggle = function Toggle(_ref) {
  var label = _ref.label,
    prefixClassName = _ref.prefixClassName,
    className = _ref.className,
    value = _ref.value,
    onChange = _ref.onChange,
    redGreen = _ref.redGreen,
    onFocus = _ref.onFocus,
    onBlur = _ref.onBlur,
    error = _ref.error,
    disabled = _ref.disabled;
  var _React$useContext = React.useContext(Context),
    primaryColor = _React$useContext.primaryColor;
  var activeClassName = value ? styles.active : "";
  var disabledClassName = disabled ? styles.disabled : "";
  var _TextInputDOM = useRef();
  var _useInput = useInput(_TextInputDOM, onFocus, onBlur),
    focused = _useInput.focused,
    handleFocus = _useInput.handleFocus,
    handleBlur = _useInput.handleBlur;
  var redGreenClassName = redGreen ? styles.redGreen : "";
  var classNames = {
    main: cc([styles.toggleInput, redGreenClassName, activeClassName, disabledClassName])
  };
  var toggleStyle = value && !redGreen ? {
    backgoundColor: rgba(primaryColor, 0.2),
    borderColor: primaryColor
  } : {};
  var toggleKnobStyle = value && !redGreen ? {
    backgroundColor: primaryColor,
    borderColor: primaryColor
  } : {};
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "toggle",
    className: "".concat(styles.toggle, " ").concat(redGreenClassName, " ").concat(prefixClassName, " ").concat(className),
    onClick: function onClick() {
      return !disabled && onChange(!value);
    }
  }, /*#__PURE__*/React.createElement(Label, {
    focused: focused,
    error: error,
    className: "".concat(styles.toggleLabel, " ").concat(prefixClassName, "-label")
  }, label), /*#__PURE__*/React.createElement("div", {
    tabIndex: "0",
    onFocus: handleFocus,
    onBlur: handleBlur,
    style: toggleStyle,
    className: "".concat(classNames.main, " ").concat(prefixClassName, "-toggle")
  }, /*#__PURE__*/React.createElement("div", {
    style: toggleKnobStyle,
    className: "".concat(styles.toggleInputKnob, " ").concat(redGreenClassName, " ").concat(prefixClassName, "-toggle-knob ").concat(activeClassName)
  })));
};
Toggle.propTypes = {
  /** Label for toggle  */
  label: PropTypes.string,
  /** prefix to be appended to the child elements */
  prefixClassName: PropTypes.string,
  /** The classname to be appended to the outermost element */
  className: PropTypes.string,
  /** Boolean value true or false */
  value: PropTypes.bool,
  /** Changes toggle to red and green style */
  redGreen: PropTypes.bool,
  /** On toggle change function */
  onChange: PropTypes.func,
  /** On focus function */
  onFocus: PropTypes.func,
  /** On blur function */
  onBlur: PropTypes.func,
  /** Error class enable or disable on toggle label  */
  error: PropTypes.bool,
  /** Disables the toggle  */
  disabled: PropTypes.bool
};
Toggle.defaultProps = {
  label: "",
  prefixClassName: "",
  className: "",
  value: false,
  redGreen: false,
  onChange: function onChange() {},
  onFocus: function onFocus() {},
  onBlur: function onBlur() {},
  error: false,
  disabled: false
};
Toggle.classNames = {
  $prefix: "Outermost element",
  "$prefix-label": "Label element",
  "$prefix-toggle": "Inner element that wraps the toggle",
  "$prefix-toggle-knob": "Knob element inside the wrapper"
};
Toggle.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Toggle",
  "props": {
    "label": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "Label for toggle"
    },
    "prefixClassName": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "prefix to be appended to the child elements"
    },
    "className": {
      "defaultValue": {
        "value": "\"\"",
        "computed": false
      },
      "type": {
        "name": "string"
      },
      "required": false,
      "description": "The classname to be appended to the outermost element"
    },
    "value": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Boolean value true or false"
    },
    "redGreen": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Changes toggle to red and green style"
    },
    "onChange": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "On toggle change function"
    },
    "onFocus": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "On focus function"
    },
    "onBlur": {
      "defaultValue": {
        "value": "() => {}",
        "computed": false
      },
      "type": {
        "name": "func"
      },
      "required": false,
      "description": "On blur function"
    },
    "error": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Error class enable or disable on toggle label"
    },
    "disabled": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "type": {
        "name": "bool"
      },
      "required": false,
      "description": "Disables the toggle"
    }
  }
};

export default Toggle;
