var __assign = this && this.__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];

      for (var p in s) {
        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
      }
    }

    return t;
  };

  return __assign.apply(this, arguments);
};

var __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import classNames from 'classnames';
import "./style/toggle.css";
var prefixCls = 'dmc-toggle';

var Checked = function Checked() {
  return _jsx("svg", __assign({
    width: "8",
    height: "6",
    viewBox: "0 0 8 6",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    className: "dmc-inner-icon"
  }, {
    children: _jsx("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M3.39537 5.75209C3.22775 5.91708 3.00967 6 2.79074 6C2.57181 6 2.35288 5.91708 2.18611 5.75209L0.250788 3.83733C-0.0835961 3.50735 -0.0835961 2.97176 0.250788 2.64093C0.585173 2.3101 1.12566 2.3101 1.46005 2.64093L2.79074 3.95748L6.53995 0.248123C6.87434 -0.0827076 7.41483 -0.0827076 7.74921 0.248123C8.0836 0.578953 8.0836 1.1137 7.74921 1.44453L3.39537 5.75209Z",
      fill: "currentColor"
    }, void 0)
  }), void 0);
};

var Uncheck = function Uncheck() {
  return _jsx("svg", __assign({
    width: "6",
    height: "6",
    viewBox: "0 0 6 6",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    className: "dmc-inner-icon"
  }, {
    children: _jsx("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M5.7702 4.66227C6.0766 4.96869 6.0766 5.46397 5.7702 5.77038C5.6174 5.9232 5.41679 6 5.21618 6C5.01557 6 4.81497 5.9232 4.66216 5.77038L3.0001 4.10821L1.33725 5.77038C1.18445 5.9232 0.983838 6 0.78323 6C0.582623 6 0.382799 5.9232 0.22921 5.77038C-0.0764032 5.46397 -0.0764032 4.96869 0.22921 4.66227L1.89127 3.0001L0.22921 1.33793C-0.0764032 1.03151 -0.0764032 0.535445 0.22921 0.229812C0.535606 -0.0766041 1.03164 -0.0766041 1.33725 0.229812L3.0001 1.89198L4.66216 0.229812C4.96856 -0.0766041 5.46381 -0.0766041 5.7702 0.229812C6.0766 0.535445 6.0766 1.03151 5.7702 1.33793L4.10814 3.0001L5.7702 4.66227Z",
      fill: "currentColor"
    }, void 0)
  }), void 0);
};

var Loading = function Loading() {
  return _jsx("svg", __assign({
    width: "10",
    height: "10",
    viewBox: "0 0 10 10",
    fill: "none",
    xmlns: "http://www.w3.org/2000/svg",
    className: "dmc-toggle-loading-icon"
  }, {
    children: _jsx("path", {
      fillRule: "evenodd",
      clipRule: "evenodd",
      d: "M0.520813 4.99998C0.520813 2.5262 2.5262 0.520813 4.99998 0.520813C5.03167 0.520813 5.0633 0.521143 5.09486 0.5218C7.52495 0.572411 9.47915 2.55792 9.47915 4.99998C9.47915 7.47376 7.47376 9.47915 4.99998 9.47915C4.71233 9.47915 4.47915 9.24596 4.47915 8.95831C4.47915 8.67066 4.71233 8.43748 4.99998 8.43748C6.89846 8.43748 8.43748 6.89846 8.43748 4.99998C8.43748 3.12595 6.93773 1.60207 5.07317 1.56324C5.04884 1.56273 5.02445 1.56248 4.99998 1.56248C3.1015 1.56248 1.56248 3.1015 1.56248 4.99998C1.56248 5.28763 1.32929 5.52081 1.04165 5.52081C0.753998 5.52081 0.520813 5.28763 0.520813 4.99998Z",
      fill: "currentColor"
    }, void 0)
  }), void 0);
};

var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var _a;

  var size = props.size,
      disabled = props.disabled,
      className = props.className,
      onChange = props.onChange,
      checked = props.checked,
      defaultChecked = props.defaultChecked,
      checkedChildren = props.checkedChildren,
      unCheckedChildren = props.unCheckedChildren,
      showText = props.showText,
      checkedText = props.checkedText,
      unCheckedText = props.unCheckedText,
      loading = props.loading,
      enableChangeLoading = props.enableChangeLoading,
      restProps = __rest(props, ["size", "disabled", "className", "onChange", "checked", "defaultChecked", "checkedChildren", "unCheckedChildren", "showText", "checkedText", "unCheckedText", "loading", "enableChangeLoading"]);

  var _b = React.useState(defaultChecked || false),
      unControlVal = _b[0],
      setUnControlVal = _b[1];

  var isControl = ('checked' in props);
  var val = !!(isControl ? checked : unControlVal);

  var _c = React.useState(false),
      changing = _c[0],
      setChanging = _c[1];

  var wrapperCls = classNames(prefixCls, (_a = {}, _a[prefixCls + "-" + size] = size, _a[prefixCls + "-disabled"] = disabled, _a[prefixCls + "-on"] = val, _a), className);

  var handleChange = function handleChange(e) {
    !isControl && setUnControlVal(!val);

    if (enableChangeLoading) {
      setChanging(true);
      onChange && onChange(!val, e, function () {
        setChanging(false);
      });
    } else {
      onChange && onChange(!val, e);
    }
  };

  var node = loading || changing ? _jsx(Loading, {}, void 0) : val ? checkedChildren || _jsx(Checked, {}, void 0) : unCheckedChildren || _jsx(Uncheck, {}, void 0);
  var text = val ? checkedText : unCheckedText;
  var onClick = loading || changing || disabled ? undefined : handleChange;
  return _jsxs("div", __assign({}, restProps, {
    ref: ref,
    className: wrapperCls
  }, {
    children: [showText && _jsx("div", __assign({
      className: prefixCls + "-text"
    }, {
      children: text
    }), void 0), _jsx("button", __assign({
      className: prefixCls + "-button",
      onClick: onClick
    }, {
      children: _jsx("span", __assign({
        className: prefixCls + "-button-inner"
      }, {
        children: node
      }), void 0)
    }), void 0)]
  }), void 0);
});
Toggle.displayName = 'Toggle';
export default Toggle;
var ToggleMemo = /*#__PURE__*/React.memo(Toggle);
ToggleMemo.displayName = 'ToggleMemo';

