import React__default, { useState, useCallback } from 'react';
import { _ as _objectSpread2 } from '../_rollupPluginBabelHelpers-4f8ebde4.js';
import useSendbirdStateContext from '../useSendbirdStateContext.js';
import '../withSendbird.js';

/**
 * The default value of `checked` should be null
 * to support both case of controlled and uncontrolled component
 * ref: https://github.com/aaronshaf/react-toggle#props
 */
const noop = () => {/* noop */};
const TOGGLE_DEFAULT_VALUE = {
  checked: null,
  defaultChecked: false,
  disabled: false,
  onChange: noop,
  onFocus: noop,
  onBlur: noop
};
const ToggleContext = /*#__PURE__*/React__default.createContext(TOGGLE_DEFAULT_VALUE);
function useToggleContext() {
  const context = React__default.useContext(ToggleContext);
  if (context === undefined) {
    throw new Error('@sendbird/uikit-react/ui/Toggle: useToggleContext must be used within a ToggleContainer.');
  }
  return context;
}

// Props Explanation https://github.com/aaronshaf/react-toggle#props
function ToggleContainer(_ref) {
  let {
    checked = TOGGLE_DEFAULT_VALUE.checked,
    // null
    defaultChecked = TOGGLE_DEFAULT_VALUE.defaultChecked,
    disabled = TOGGLE_DEFAULT_VALUE.disabled,
    onChange = TOGGLE_DEFAULT_VALUE.onChange,
    onFocus = TOGGLE_DEFAULT_VALUE.onFocus,
    onBlur = TOGGLE_DEFAULT_VALUE.onBlur,
    children
  } = _ref;
  const [isChecked, setChecked] = useState(defaultChecked || false);
  const handleChange = useCallback(e => {
    if (disabled) {
      return;
    }
    if (checked === null) {
      setChecked(e.currentTarget.checked);
    }
    onChange(e);
  }, [onChange, checked]);
  return /*#__PURE__*/React__default.createElement(ToggleContext.Provider, {
    value: {
      checked: checked !== null ? checked : isChecked,
      disabled,
      onChange: handleChange,
      onFocus: e => {
        if (!disabled) {
          onFocus(e);
        }
      },
      onBlur: e => {
        if (!disabled) {
          onBlur(e);
        }
      }
    }
  }, children);
}

function filterNumber(input) {
  if (typeof input !== 'string' && typeof input !== 'number') {
    try {
      const {
        config
      } = useSendbirdStateContext();
      const {
        logger
      } = config;
      logger.warning('@sendbird/uikit-react/ui/Toggle: TypeError - expected string or number.', input);
    } catch (_) {/* noop */}
    return [];
  }
  if (typeof input === 'number') {
    return [input];
  }
  const regex = /(-?\d+)(\.\d+)?/g;
  const numbers = input.match(regex) || [];
  return numbers.map(parseFloat);
}

function ToggleUI(props) {
  var _filterNumber;
  const {
    reversed = false,
    width = '40px',
    animationDuration = '0.5s',
    style = {},
    name = '',
    id = '',
    ariaLabel = '',
    ariaLabelledby = ''
  } = props;
  const {
    checked,
    disabled,
    onChange,
    onFocus,
    onBlur
  } = useToggleContext();

  // animation should not be activated in the initialization step
  const [animatedClassName, setAnimatedClassName] = useState('');
  const toggleWidth = (_filterNumber = filterNumber(width)) === null || _filterNumber === void 0 ? void 0 : _filterNumber[0];
  const toggleHeight = toggleWidth / 2;
  // The size of dot should be 60% of toggle height
  const dotSize = toggleHeight * 0.6;
  return /*#__PURE__*/React__default.createElement("label", {
    className: ['sendbird-input-toggle-button', animatedClassName, checked ? 'sendbird-input-toggle-button--checked' : 'sendbird-input-toggle-button--unchecked', disabled ? 'sendbird-input-toggle-button--disabled' : [], reversed ? 'sendbird-input-toggle-button--reversed' : []].flat().join(' '),
    style: _objectSpread2({
      width: `${toggleWidth}px`,
      height: `${toggleHeight}px`,
      borderRadius: `${dotSize}px`
    }, style)
  }, /*#__PURE__*/React__default.createElement("div", {
    className: ['sendbird-input-toggle-button__inner-dot', checked ? 'sendbird-input-toggle-button__inner-dot--activate' : 'sendbird-input-toggle-button__inner-dot--inactivate'].join(' '),
    style: {
      width: `${dotSize}px`,
      height: `${dotSize}px`,
      animationDuration
    }
  }), /*#__PURE__*/React__default.createElement("input", {
    type: "checkbox",
    "aria-label": ariaLabel,
    "aria-labelledby": ariaLabelledby,
    name: name,
    id: id,
    checked: checked,
    disabled: disabled,
    onChange: e => {
      onChange(e);
      setAnimatedClassName(e.currentTarget.checked ? 'sendbird-input-toggle-button--turned-on' : 'sendbird-input-toggle-button--turned-off');
    },
    onFocus: onFocus,
    onBlur: onBlur
  }));
}

function Toggle(props) {
  const {
    // ToggleProvider
    checked,
    defaultChecked,
    disabled,
    onChange,
    onFocus,
    onBlur,
    // ToggleUI
    className,
    reversed,
    width,
    // height will be half of width
    animationDuration,
    style,
    name,
    id,
    ariaLabel,
    ariaLabelledby
  } = props;
  return /*#__PURE__*/React__default.createElement("div", {
    className: `sendbird-ui-toggle ${className}`
  }, /*#__PURE__*/React__default.createElement(ToggleContainer, {
    checked: checked,
    defaultChecked: defaultChecked,
    disabled: disabled,
    onChange: onChange,
    onFocus: onFocus,
    onBlur: onBlur
  }, /*#__PURE__*/React__default.createElement(ToggleUI, {
    reversed: reversed,
    width: width,
    animationDuration: animationDuration,
    style: style,
    name: name,
    id: id,
    ariaLabel: ariaLabel,
    ariaLabelledby: ariaLabelledby
  })));
}

export { Toggle, ToggleContainer, ToggleUI, useToggleContext };
//# sourceMappingURL=Toggle.js.map
