import React from 'react';
import classnames from 'classnames';
import { InfoIcon } from '../info-icon';
import { TogglerPulse } from './toggler-pulse';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/** Fancy input[type=checkbox]
 * [CAPITALIZATION] Title must be in title case
 * [CAPITALIZATION] Label must be in sentence case
    @midnight-gray-supported
    @alpine-light-supported
 */
export const TogglerSwitch = /*#__PURE__*/React.forwardRef(({
  checked = false,
  isDisabled = false,
  noticeable,
  primary,
  labelText,
  ariaLabel,
  subText,
  onChange = () => {},
  id,
  testId,
  children,
  infoIconText,
  infoIconTestId
}, ref) =>
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
_jsxs("div", {
  className: "toggler-switch",
  "test-id": testId,
  onClick: e => e.stopPropagation(),
  children: [/*#__PURE__*/_jsx("input", {
    type: "checkbox",
    className: classnames('toggle', {
      primary
    }),
    id: id,
    "aria-label": ariaLabel || labelText,
    "test-id": `${testId}-input`,
    checked: checked,
    disabled: isDisabled,
    onChange: e => onChange(e.target.checked),
    ref: ref
  }), /*#__PURE__*/_jsxs("label", {
    htmlFor: id,
    "test-id": `${testId}-label`,
    children: [children, /*#__PURE__*/_jsx("span", {
      children: labelText
    }), !!infoIconText && /*#__PURE__*/_jsx(InfoIcon, {
      testId: infoIconTestId,
      children: infoIconText
    })]
  }), noticeable && /*#__PURE__*/_jsx(TogglerPulse, {}), subText && /*#__PURE__*/_jsxs(_Fragment, {
    children: [/*#__PURE__*/_jsx("div", {
      className: "toggler-switch-break"
    }), /*#__PURE__*/_jsx("span", {
      className: classnames('toggler-switch-subtext', isDisabled && 'disabled'),
      children: subText
    })]
  })]
}));
TogglerSwitch.displayName = 'TogglerSwitch';