function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React, { useContext } from 'react';
import clsx from 'clsx';
import Loading from '../loading';
import { BORDER_SURROUND, SHADOW, WHITE } from '../utils/constant';
import ConfigProviderContext from '../config-provider/ConfigProviderContext';
import ButtonContext from './ButtonContext';

var Button = function Button(props) {
  var _clsx;

  var color = props.color,
      loading = props.loading,
      className = props.className,
      hairline = props.hairline,
      loadingText = props.loadingText;

  var _useContext = useContext(ConfigProviderContext),
      prefixCls = _useContext.prefixCls,
      createNamespace = _useContext.createNamespace;

  var _createNamespace = createNamespace('button', prefixCls),
      bem = _createNamespace[0];

  var _useContext2 = useContext(ButtonContext),
      parent = _useContext2.parent;

  var size = React.useMemo(function () {
    return props.size || (parent == null ? void 0 : parent.size) || 'normal';
  }, [parent == null ? void 0 : parent.size, props.size]);
  var type = React.useMemo(function () {
    return props.type || (parent == null ? void 0 : parent.type) || 'default';
  }, [parent == null ? void 0 : parent.type, props.type]);
  var plain = React.useMemo(function () {
    var _props$plain;

    return (_props$plain = props.plain) != null ? _props$plain : parent == null ? void 0 : parent.plain;
  }, [parent == null ? void 0 : parent.plain, props.plain]);
  var block = React.useMemo(function () {
    var _props$block;

    return (_props$block = props.block) != null ? _props$block : parent == null ? void 0 : parent.block;
  }, [parent == null ? void 0 : parent.block, props.block]);
  var iconPosition = React.useMemo(function () {
    return props.iconPosition || (parent == null ? void 0 : parent.iconPosition) || 'left';
  }, [parent == null ? void 0 : parent.iconPosition, props.iconPosition]);
  var disabled = React.useMemo(function () {
    var _props$disabled;

    return (_props$disabled = props.disabled) != null ? _props$disabled : parent == null ? void 0 : parent.disabled;
  }, [parent == null ? void 0 : parent.disabled, props.disabled]);
  var nativeType = React.useMemo(function () {
    return props.nativeType || (parent == null ? void 0 : parent.nativeType) || 'button';
  }, [parent == null ? void 0 : parent.nativeType, props.nativeType]);
  var tag = React.useMemo(function () {
    return props.tag || (parent == null ? void 0 : parent.tag) || 'button';
  }, [parent == null ? void 0 : parent.tag, props.tag]);
  var TagElement = tag;
  var classes = clsx(className, bem([type, size, {
    plain: plain,
    loading: loading,
    disabled: disabled,
    hairline: hairline,
    block: block,
    round: props.round,
    square: props.square
  }]), (_clsx = {}, _clsx[BORDER_SURROUND] = hairline, _clsx), props.shadow && SHADOW + "--" + +props.shadow);

  var style = _extends({}, props.style);

  if (color) {
    style.color = plain ? color : WHITE;

    if (!plain) {
      // Use background instead of backgroundColor to make linear-gradient work
      style.background = color;
    } // hide border when color is linear-gradient


    if (color.indexOf('gradient') !== -1) {
      style.border = 0;
    } else {
      style.borderColor = color;
    }
  }

  var onClick = function onClick(event) {
    if (!loading && !disabled && props.onClick) {
      props.onClick(event);
    }
  };

  var renderLoadingIcon = function renderLoadingIcon() {
    if (loading) {
      var _props$loadingSize = props.loadingSize,
          loadingSize = _props$loadingSize === void 0 ? '20px' : _props$loadingSize,
          loadingType = props.loadingType;
      return /*#__PURE__*/React.createElement(Loading, {
        className: clsx(bem('loading')),
        size: loadingSize,
        type: loadingType,
        color: type === 'default' ? undefined : ''
      });
    }

    return null;
  };

  var renderIcon = function renderIcon() {
    if (props.loading) {
      return renderLoadingIcon();
    }

    if (props.icon) {
      return /*#__PURE__*/React.cloneElement(props.icon, {
        className: clsx(bem('icon'))
      });
    }

    return null;
  };

  var renderText = function renderText() {
    var text;

    if (loading) {
      text = loadingText;
    } else {
      text = props.children || props.text;
    }

    if (text) {
      return /*#__PURE__*/React.createElement("span", {
        key: "text",
        className: clsx(bem('text'))
      }, text);
    }

    return null;
  };

  var renderContent = function renderContent() {
    return /*#__PURE__*/React.createElement("div", {
      className: clsx(bem('content'))
    }, iconPosition === 'left' && renderIcon(), renderText(), iconPosition === 'right' && renderIcon());
  };

  return /*#__PURE__*/React.createElement(TagElement, {
    className: classes,
    style: style,
    type: nativeType,
    onClick: onClick
  }, renderContent());
};

export default Button;