import React, { useState, useContext } from "react"
import PropTypes from "prop-types"
import cx from "classnames"
import IconButton from "./icon-button"
import ButtonGroup from "./button-group"
import CKIcon from "../ck-icon"
import { ButtonGroupContext } from "./button-group"

const SIZES = {
  sm: "text-sm py-1 px-3",
  md: "text-sm py-2 px-4",
  lg: "text-sm py-3 px-5",
}

export const TOKENS = {
  primary: "text-white hover:text-white focus:text-white bg-red-500 hover:bg-red-600",
  secondary: "text-gray-800 bg-white hover:bg-gray-50 border-gray-200",
  tertiary: "text-gray-800 bg-transparent hover:bg-gray-50",
  plain: "",
}

const COLOR_FALLBACK = {
  red: TOKENS["primary"],
  white: TOKENS["secondary"],
  plain: TOKENS["tertiary"],
}

/**
 * @param {Object} props
 * @param {"primary"|"secondary"|"tertiary"|"plain"} props.is
 * @param {"sm"|"md"|"lg"} props.size
 * @param {string} props.icon
 * @param {boolean} props.disabled
 * @param className any custom classes to be applied to button
 */
const Button = React.forwardRef(
  (
    {
      is,
      color,
      size = "md",
      icon,
      disabled = false,
      className,
      children,
      onMouseDown = () => {},
      onBlur = () => {},
      ...props
    },
    ref
  ) => {
    const groupContext = useContext(ButtonGroupContext)
    const [clicked, setClicked] = useState(false)
    const DEFAULT = `leading-snug border border-solid border-transparent no-underline font-sans font-semibold transition duration-200 hover:no-underline focus:no-underline focus:outline-none`
    const classes = cx(
      className,
      disabled ? "cursor-default" : "cursor-pointer",
      {
        [DEFAULT]: Object.keys(TOKENS).includes(is) || disabled || color,
        [SIZES[size]]: Object.keys(TOKENS).includes(is) || disabled || color,
        [COLOR_FALLBACK[color]]: color,
        [TOKENS[is]]: !disabled,
        "rounded": is || disabled,
        "text-gray-600 bg-gray-200": disabled,
        "focus:outline-blue": !clicked,
        "inline-block": props.href,
        "inline-flex items-center justify-center align-middle": Boolean(icon),
        "rounded-none border-none": groupContext.present
      }
    )

    const handleMouseDown = (event) => {
      setClicked(true)
      onMouseDown(event)
    }

    const handleBlur = (event) => {
      setClicked(false)
      onBlur(event)
    }

    const Component = props.href ? "a" : "button"

    return (
      <Component
        {...props}
        ref={ref}
        className={classes}
        disabled={disabled}
        onMouseDown={handleMouseDown}
        onBlur={handleBlur}
      >
        {icon && (
          <CKIcon name={icon} className="mr-2 pointer-events-none" />
        )}
        {children}
      </Component>
    )
  }
)

Button.propTypes = {
  className: PropTypes.string,
  children: PropTypes.node,
  is: PropTypes.oneOf([
    "primary", // main color
    "secondary", // white
    "tertiary", // transparent with bg on hover
    "plain", // sets defaults without color for easy customization
  ]),
  /** Temporary fallback for "is" prop */
  color: PropTypes.oneOf([
    "red",
    "white",
    "plain",
  ]),
  disabled: PropTypes.bool,
  size: PropTypes.oneOf(["sm", "md", "lg"]),
  icon: PropTypes.elementType,
  href: PropTypes.string,
  active: PropTypes.bool,
  onMouseDown: PropTypes.func,
  onBlur: PropTypes.func,
}

export { ButtonGroup, IconButton }

export default Button
