/**
 * @description Button
 *
 * @date 创建时间 2022/6/17 12:01
 * @author ryan.li
 */

import React, { FC } from "react";
import clsx from "clsx";

import { URL_REGEXP } from "@utils/regExpUtils";
import { Loading } from "@atomintl/aui-next";
import type { ButtonProps } from "./interface";
import "./styles/index.css";

/**
 * 按钮是一种命令组件，可发起一个即时操作。
 *
 * ### 引用方法
 * ```tsx
 * import { Button } from "@atomintl/exchange-ui"
 * ```
 */
export const Button: FC<ButtonProps> = props => {
  const {
    className,
    disabled,
    size,
    children,
    href,
    fullWidth,
    color,
    variant,
    startIcon,
    endIcon,
    loading,
    onClick,
    ...restProps
  } = props;

  const classes = clsx(
    `nts-btn-base`,
    {
      [`w-full`]: fullWidth,

      [`nts-btn-small`]: size === "small",
      [`nts-btn-medium`]: size === "medium",
      [`nts-btn-large`]: size === "large",
      [`nts-btn-loading`]: loading,

      [`nts-btn-primary-outlined-enable`]: color === "primary" && variant === "outlined" && !disabled,
      [`nts-btn-red-outlined-enable`]: color === "red" && variant === "outlined" && !disabled,
      [`nts-btn-green-outlined-enable`]: color === "green" && variant === "outlined" && !disabled,
      [`nts-btn-gray-outlined-enable`]: color === "gray" && variant === "outlined" && !disabled,
      [`nts-btn-outlined-disabled`]: variant === "outlined" && disabled,

      [`nts-btn-primary-contained-enable`]: color === "primary" && variant === "contained" && !disabled,
      [`nts-btn-red-contained-enable`]: color === "red" && variant === "contained" && !disabled,
      [`nts-btn-green-contained-enable`]: color === "green" && variant === "contained" && !disabled,
      [`nts-btn-gray-contained-enable`]: color === "gray" && variant === "contained" && !disabled,
      [`nts-btn-contained-disabled`]: variant === "contained" && disabled,

      [`nts-btn-primary-text-enable`]: color === "primary" && variant === "text" && !disabled,
      [`nts-btn-red-text-enable`]: color === "red" && variant === "text" && !disabled,
      [`nts-btn-green-text-enable`]: color === "green" && variant === "text" && !disabled,
      [`nts-btn-gray-text-enable`]: color === "gray" && variant === "text" && !disabled,
      [`nts-btn-text-disabled`]: variant === "text" && disabled
    },
    className
  );

  const handleClick = (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
    const { onClick } = props;
    if (loading || disabled) return;
    onClick?.(event);
  };

  if (typeof href === "string" && URL_REGEXP.test(href)) {
    return (
      <a href={href} className={classes}>
        {startIcon ? startIcon : null}
        {children}
        {endIcon ? endIcon : null}
      </a>
    );
  } else {
    return (
      <button disabled={disabled} className={classes} onClick={handleClick} {...restProps}>
        {loading ? (
          <Loading spinning={loading} fullWH={false} size="small" color="secondary" />
        ) : (
          <React.Fragment>
            {startIcon ? startIcon : null}
            {children && <span>{children}</span>}
            {endIcon ? endIcon : null}
          </React.Fragment>
        )}
      </button>
    );
  }
};

Button.defaultProps = {
  disabled: false,
  fullWidth: false,
  size: "medium",
  color: "gray",
  variant: "text",
  loading: false
};

export { ButtonProps } from "./interface";
export default Button;