import React, { memo } from 'react';
import Button from './button';
// import { useTheme } from '@helpdice/theme';
// import { getButtonColors } from './styles';

// import useScale from 'components/use-scale';

var CompactButton = function CompactButton(_ref) {
  var _ref$color = _ref.color,
    _color = _ref$color === void 0 ? 'default' : _ref$color,
    _ref$to = _ref.to,
    to = _ref$to === void 0 ? '/' : _ref$to,
    children = _ref.children,
    iconRight = _ref.iconRight,
    icon = _ref.icon,
    _ref$scale = _ref.scale,
    scale = _ref$scale === void 0 ? 2 / 3 : _ref$scale,
    type = _ref.type,
    style = _ref.style,
    a = _ref.a,
    target = _ref.target,
    onClick = _ref.onClick;
  // const theme = useTheme();
  // const { SCALES } = useScale();
  // const [paddingLeft, paddingRight] = [
  //   auto ? SCALES.pl(1.15) : SCALES.pl(1.375),
  //   auto ? SCALES.pr(1.15) : SCALES.pr(1.375),
  // ]
  // const { bg, border, color } = useMemo(
  //       () => getButtonColors(theme.palette, {
  //         color: _color
  //       }),
  //       [theme.palette],
  //     )
  if (a) {
    return /*#__PURE__*/React.createElement(Button, {
      icon: icon,
      style: style,
      type: type,
      onClick: function onClick() {
        return window.open(to, target);
      },
      auto: true,
      scale: scale,
      px: 0.6,
      iconRight: iconRight
    }, children)
    // <a
    //     style={
    //         {
    //             all: 'unset',
    //             boxSizing: 'border-box',
    //             display: 'inline-block',
    //             lineHeight: 'calc(2.5* 16px)',
    //             fontWeight: '400',
    //             fontSize: 'calc(0.875* 16px)',
    //             textAlign: 'center',
    //             whiteSpace: 'nowrap',
    //             position: 'relative',
    //             overflow: 'hidden',
    //             color: color,
    //             backgroundColor: bg,
    //             border: `1px solid ${border}`,
    //             cursor: 'pointer',
    //             '--helpdice-ui-button-icon-padding': `${SCALES.pl(0.727)}`,
    // '--helpdice-ui-button-height': `${SCALES.height(2.5)}`,
    // '--helpdice-ui-button-color':`${color}`,
    // '--helpdice-ui-button-bg': `${bg}`,
    // minWidth: `${auto ? 'min-content' : SCALES.width(10.5)}`,
    // width: `${auto ? 'auto' : 'initial'}`,
    // height: `${SCALES.height(2.5)}`,
    // padding:` ${SCALES.pt(0)} ${paddingRight} ${SCALES.pb(0)} ${paddingLeft}`,
    // margin: `${SCALES.mt(0)} ${SCALES.mr(0)} ${SCALES.mb(0)} ${SCALES.ml(0)}`
    //         } as React.CSSProperties
    //     }
    //     href={to}
    //     target={target}
    // >
    //     <span
    //         style={{
    //             position: 'absolute',
    //             right: 'auto',
    //             left: 'var(--helpdice-ui-button-icon-padding)',
    //             top: '50%',
    //             transform: 'translateY(-50%)',
    //             display: 'flex',
    //             justifyContent: 'center',
    //             alignItems: 'center',
    //             color: 'var(--helpdice-ui-button-color)',
    //             zIndex: 1
    //         }}
    //     >
    //         {icon}
    //     </span>
    //     <div
    //         style={{
    //             display: 'inline-flex',
    //             position: 'relative',
    //             zIndex: 1,
    //             justifyContent: 'center',
    //             alignItems: 'center',
    //             textAlign: 'center',
    //             lineHeight: 'inherit',
    //             paddingLeft: icon ? 'calc(var(--helpdice-ui-button-height) / 2 + var(--helpdice-ui-button-icon-padding)* .5)' : 0
    //         }}
    //     >
    //         {children}
    //     </div>
    // </a>
    ;
  }
  return /*#__PURE__*/React.createElement(Button, {
    icon: icon,
    style: style,
    type: type,
    onClick: onClick,
    auto: true,
    scale: scale,
    px: 0.6,
    iconRight: iconRight
  }, children);
};
export default /*#__PURE__*/memo(CompactButton);