import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["children", "disabled", "color", "loading", "shadow", "ghost", "effect", "round", "relative", "replace", "a", "to", "onClick", "auto", "icon", "type", "iconRight", "className", "crossOrigin"];
import _JSXStyle from "../styled-jsx.es.js";
/* "use client" */

import React, { useRef, useState, useMemo, useImperativeHandle } from 'react';
// import { useNavigate } from "react-router-dom";
import useScale, { withScale } from '../use-scale';
import { useTheme, useClasses } from '@helpdice/theme';
import ButtonDrip from './button.drip';
import ButtonLoading from './button-loading';
import { filterPropsWithGroup, getButtonChildrenWithIcon } from './utils';
import { useButtonGroupContext } from '../button-group/button-group-context';
import { getButtonColors, getButtonCursor, getButtonDripColor, getButtonHoverColors } from './styles';
var ButtonComponent = /*#__PURE__*/React.forwardRef(function (btnProps, ref) {
  var theme = useTheme();
  // const navigate = useNavigate();
  var _useScale = useScale(),
    SCALES = _useScale.SCALES;
  var buttonRef = useRef(null);
  useImperativeHandle(ref, function () {
    return buttonRef.current;
  }); // Changed with !

  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    dripShow = _useState2[0],
    setDripShow = _useState2[1];
  var _useState3 = useState(0),
    _useState4 = _slicedToArray(_useState3, 2),
    dripX = _useState4[0],
    setDripX = _useState4[1];
  var _useState5 = useState(0),
    _useState6 = _slicedToArray(_useState5, 2),
    dripY = _useState6[0],
    setDripY = _useState6[1];
  var groupConfig = useButtonGroupContext();
  var filteredProps = filterPropsWithGroup(btnProps, groupConfig);
  /* eslint-disable @typescript-eslint/no-unused-vars */
  var children = filteredProps.children,
    _filteredProps$disabl = filteredProps.disabled,
    disabled = _filteredProps$disabl === void 0 ? false : _filteredProps$disabl,
    _filteredProps$color = filteredProps.color,
    _color = _filteredProps$color === void 0 ? 'default' : _filteredProps$color,
    _filteredProps$loadin = filteredProps.loading,
    loading = _filteredProps$loadin === void 0 ? false : _filteredProps$loadin,
    _filteredProps$shadow = filteredProps.shadow,
    shadow = _filteredProps$shadow === void 0 ? false : _filteredProps$shadow,
    _filteredProps$ghost = filteredProps.ghost,
    ghost = _filteredProps$ghost === void 0 ? false : _filteredProps$ghost,
    _filteredProps$effect = filteredProps.effect,
    effect = _filteredProps$effect === void 0 ? true : _filteredProps$effect,
    _filteredProps$round = filteredProps.round,
    round = _filteredProps$round === void 0 ? false : _filteredProps$round,
    relative = filteredProps.relative,
    replace = filteredProps.replace,
    _filteredProps$a = filteredProps.a,
    a = _filteredProps$a === void 0 ? false : _filteredProps$a,
    to = filteredProps.to,
    onClick = filteredProps.onClick,
    _filteredProps$auto = filteredProps.auto,
    auto = _filteredProps$auto === void 0 ? false : _filteredProps$auto,
    icon = filteredProps.icon,
    _filteredProps$type = filteredProps.type,
    type = _filteredProps$type === void 0 ? 'button' : _filteredProps$type,
    iconRight = filteredProps.iconRight,
    _filteredProps$classN = filteredProps.className,
    className = _filteredProps$classN === void 0 ? '' : _filteredProps$classN,
    _filteredProps$crossO = filteredProps.crossOrigin,
    crossOrigin = _filteredProps$crossO === void 0 ? '' : _filteredProps$crossO,
    props = _objectWithoutProperties(filteredProps, _excluded);
  /* eslint-enable @typescript-eslint/no-unused-vars */

  var _useMemo = useMemo(function () {
      return getButtonColors(theme.palette, filteredProps);
    }, [theme.palette, filteredProps]),
    bg = _useMemo.bg,
    border = _useMemo.border,
    color = _useMemo.color,
    rippleColor = _useMemo.ripple;
  var hover = useMemo(function () {
    return getButtonHoverColors(theme.palette, filteredProps);
  }, [theme.palette, filteredProps]);
  var _useMemo2 = useMemo(function () {
      return getButtonCursor(disabled, loading);
    }, [disabled, loading]),
    cursor = _useMemo2.cursor,
    events = _useMemo2.events;
  var dripColor = useMemo(function () {
    return getButtonDripColor(theme.palette, filteredProps);
  }, [theme.palette, filteredProps]);

  /* istanbul ignore next */
  var dripCompletedHandle = function dripCompletedHandle() {
    setDripShow(false);
    setDripX(0);
    setDripY(0);
  };
  var createRipple = function createRipple(event) {
    var button = buttonRef.current;
    if (!button) return;
    var rect = button.getBoundingClientRect();
    var size = Math.max(rect.width, rect.height);
    var x = event.clientX - rect.left - size / 2;
    var y = event.clientY - rect.top - size / 2;
    var rippleCount = 1; // number of rings
    var rippleDelay = 500; // ms between each ripple
    var _loop = function _loop() {
      var ripple = document.createElement('span');
      Object.assign(ripple.style, {
        position: 'absolute',
        borderRadius: '50%',
        backgroundColor: rippleColor,
        width: "".concat(size, "px"),
        height: "".concat(size, "px"),
        left: "".concat(x, "px"),
        top: "".concat(y, "px"),
        pointerEvents: 'none',
        transform: 'scale(0)',
        opacity: '1',
        transition: "transform 600ms ease-out ".concat(i * rippleDelay, "ms, opacity 600ms ease-out ").concat(i * rippleDelay, "ms"),
        zIndex: 1
      });
      button.appendChild(ripple);

      // Force reflow to start transition
      window.getComputedStyle(ripple).opacity;
      ripple.style.transform = 'scale(2.5)';
      ripple.style.opacity = '0';
      ripple.addEventListener('transitionend', function () {
        ripple.remove();
      });
    };
    for (var i = 0; i < rippleCount; i++) {
      _loop();
    }
  };
  var clickHandler = function clickHandler(event) {
    if (disabled || loading) return;
    var showDrip = !shadow && !ghost && effect;
    /* istanbul ignore next */
    if (showDrip && buttonRef.current) {
      var rect = buttonRef.current.getBoundingClientRect();
      setDripShow(true);
      setDripX(event.clientX - rect.left);
      setDripY(event.clientY - rect.top);
    }
    if (shadow) {
      createRipple(event);
    }
    onClick && onClick(event);
  };
  var childrenWithIcon = useMemo(function () {
    return getButtonChildrenWithIcon(auto, children, {
      icon: icon,
      iconRight: iconRight
    });
  }, [auto, children, icon, iconRight]);
  var paddingLeft = auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
    paddingRight = auto ? SCALES.pr(1.15) : SCALES.pr(1.375);

  // If shadow provided is string then value other default
  var btnShadow = typeof shadow === 'string' ? shadow : shadow ? theme.shadows.level.z2 : 'none';
  return /*#__PURE__*/React.createElement(React.Fragment, null, to ? /*#__PURE__*/React.createElement("a", _extends({
    href: to
  }, props, {
    className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', 'btn-link', className) || "")
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
    color: color
  }), childrenWithIcon) : /*#__PURE__*/React.createElement("button", _extends({
    ref: buttonRef,
    type: type,
    disabled: disabled,
    onClick: clickHandler
  }, props, {
    className: _JSXStyle.dynamic([["612376042", [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']]]) + " " + (props && props.className != null && props.className || useClasses('btn', className) || "")
  }), loading && /*#__PURE__*/React.createElement(ButtonLoading, {
    color: color
  }), childrenWithIcon, dripShow && /*#__PURE__*/React.createElement(ButtonDrip, {
    x: dripX,
    y: dripY,
    color: dripColor,
    onCompleted: dripCompletedHandle
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "612376042",
    dynamic: [SCALES.height(2.5), round ? '50%' : theme.layout.radius, SCALES.font(0.875), color, bg, shadow ? 'transparent' : border, cursor !== null && cursor !== void 0 ? cursor : 'pointer', events, shadow ? btnShadow : 'none', SCALES.pl(0.727), SCALES.height(2.5), color, bg, auto ? 'min-content' : SCALES.width(10.5), auto ? 'auto' : 'initial', SCALES.height(2.5), SCALES.pt(0), paddingRight, SCALES.pb(0), paddingLeft, SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hover.color, hover.color, hover.bg, hover.border, cursor, events, btnShadow, shadow ? '-1px' : '0px']
  }, ".btn.__jsx-style-dynamic-selector{box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;line-height:".concat(SCALES.height(2.5), ";border-radius:").concat(round ? '50%' : theme.layout.radius, ";font-weight:400;font-size:").concat(SCALES.font(0.875), ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-transform:capitalize;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;white-space:nowrap;-webkit-transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;transition:background-color 200ms ease 0ms,box-shadow 200ms ease 0ms, border 200ms ease 0ms,color 200ms ease 0ms;position:relative;overflow:hidden;color:").concat(color, ";background-color:").concat(bg, ";border:1px solid ").concat(shadow ? 'transparent' : border, ";cursor:").concat(cursor !== null && cursor !== void 0 ? cursor : 'pointer', ";pointer-events:").concat(events, ";box-shadow:").concat(shadow ? btnShadow : 'none', ";--helpdice-ui-button-icon-padding:").concat(SCALES.pl(0.727), ";--helpdice-ui-button-height:").concat(SCALES.height(2.5), ";--helpdice-ui-button-color:").concat(color, ";--helpdice-ui-button-bg:").concat(bg, ";min-width:").concat(auto ? 'min-content' : SCALES.width(10.5), ";width:").concat(auto ? 'auto' : 'initial', ";height:").concat(SCALES.height(2.5), ";padding:").concat(SCALES.pt(0), " ").concat(paddingRight, " ").concat(SCALES.pb(0), " ").concat(paddingLeft, ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.btn.__jsx-style-dynamic-selector:hover,.btn.__jsx-style-dynamic-selector:focus{color:").concat(hover.color, ";--helpdice-ui-button-color:").concat(hover.color, ";background-color:").concat(hover.bg, ";border-color:").concat(hover.border, ";cursor:").concat(cursor, ";pointer-events:").concat(events, ";box-shadow:").concat(btnShadow, ";}.btn-link.__jsx-style-dynamic-selector{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.btn.__jsx-style-dynamic-selector .text{position:relative;z-index:1;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;line-height:inherit;top:-1px;}.btn.__jsx-style-dynamic-selector .text p,.btn.__jsx-style-dynamic-selector .text pre,.btn.__jsx-style-dynamic-selector .text div{margin:0;}.ripple.__jsx-style-dynamic-selector{position:absolute;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;animation:ripple-animation-__jsx-style-dynamic-selector 600ms ease-out;background-color:rgba(0,0,0,0.3);pointer-events:none;z-index:1;}@-webkit-keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}@keyframes ripple-animation-__jsx-style-dynamic-selector{to{-webkit-transform:scale(2.5);-ms-transform:scale(2.5);transform:scale(2.5);opacity:0;}}")));
});
ButtonComponent.displayName = 'Button';
var Button = withScale(ButtonComponent);
export default Button;