import { forwardRef, useRef } from "react";
import ReactRipples from "react-ripples";
import { MoonLoader } from "react-spinners";
import { Box, Button as _Button } from "theme-ui";

import Popup from "./popup";
import Text from "./text";

const Button = forwardRef(
  (
    {
      id,
      variant = "primary",
      sx,
      type = "button",
      disabled,
      children,
      loading,
      disabledTooltip,
      ...rest
    },
    ref
  ) => {
    const innerRef = useRef();
    const button = (
      <_Button
        ref={ref}
        id={id}
        variant={variant}
        sx={{
          backgroundImage({ colors: { primary, secondary } }) {
            return variant === "primary"
              ? `linear-gradient(90deg, ${primary} 0%, ${secondary} 100%)`
              : undefined;
          },
          position: "relative",
          ":focus": {
            boxShadow({ colors: { text } }) {
              return `0 0 1px ${text}`;
            },
          },
          cursor: disabled ? "not-alowed" : "pointer",
          ...sx,
        }}
        type={type}
        disabled={disabled || !children || loading}
        data-loading={loading}
        {...rest}
      >
        <Text
          ref={innerRef}
          id={id && `${id}-text`}
          onClick={(event) => {
            if (rest.preventDefault) event.preventDefault();
          }}
        >
          <Box
            as="span"
            sx={{
              display: "inline-flex",
              alignItems: "center",
              textAlign: "center",
            }}
            onClick={(event) => {
              if (rest.preventDefault) event.preventDefault();
            }}
          >
            {children}
            {loading && (
              <Box variant={`buttons.${variant}.spinner`}>
                <MoonLoader size={16} />
              </Box>
            )}
          </Box>
        </Text>
        <Box
          as={ReactRipples}
          sx={{
            borderRadius({
              buttons: {
                [variant]: { borderRadius },
              },
            }) {
              return borderRadius;
            },
            height: "100%",
            left: 0,
            position: "absolute !important",
            top: 0,
            width: "100%",
          }}
          onClick={(event) => {
            if (rest.preventDefault) event.preventDefault();
            innerRef.current.click();
          }}
        />
      </_Button>
    );
    return disabled && disabledTooltip ? (
      <Popup
        trigger={
          <Box
            sx={{
              display: "inline-block",
              height: sx?.height,
              width: sx?.width,
            }}
          >
            {button}
          </Box>
        }
        on={["focus", "hover"]}
        sx={{ backgroundColor: "skeleton", fontSize: 1 }}
      >
        {disabledTooltip}
      </Popup>
    ) : (
      button
    );
  }
);
Button.displayName = "Button";
export default Button;