import React from "react"
import PropTypes from "prop-types"
import cx from "classnames"
import CKIcon from "../ck-icon"
import Button from "../button"

export const types = {
  success: {
    bg: "bg-green-50",
    iconColor: "text-green-600",
    icon: "check-circle",
    buttonColor: "bg-green-200 text-gray-900 hover:bg-green-300 focus:bg-green-300"
  },
  warning: {
    bg: "bg-yellow-50",
    iconColor: "text-yellow-600",
    icon: "alert-circle",
    buttonColor: "bg-yellow-200 hover:bg-yellow-300"
  },
  info: {
    bg: "bg-blue-50",
    iconColor: "text-blue-600",
    icon: "information-circle",
    buttonColor: "bg-blue-200 hover:bg-blue-300"
  },
  error: {
    bg: "bg-red-50",
    iconColor: "text-red-600",
    icon: "alert-triangle",
    buttonColor: "bg-red-200 hover:bg-red-300"
  },
}

const sizes = {
  sm: "py-2 px-4 items-center",
  lg: "p-4",
}

export default function Note({
  type = "info",
  size = "lg",
  title,
  message,
  action,
  children,
  icon = true,
  ...props
}) {
  const className = cx(
    `rounded-lg text-sm text-gray-800 flex`,
    types[type].bg,
    sizes[size],
    props.className
  )

  const iconName = typeof(icon) === "string" ? icon : types[type].icon

  return (
    <div className={className} data-testid="note" style={{ minHeight: "48px" }}>
      {icon && (
        <CKIcon
          name={iconName}
          className={`${types[type].iconColor} mr-4`}
        />
      )}
      <div className={cx("w-full", size === "sm" && "flex items-center")}>
        {size !== "sm" && title && (
          <Title className="flex-shrink-0">{title}</Title>
        )}
        {message && (
          <p className={
            cx(
              "text-gray-700 leading-6",
              size === "sm" && "flex-grow"
            )}
          >
            {message}
          </p>
        )}
        {action && (
          <Button
            type={type}
            size="sm"
            is="plain"
            className={
              cx(
                "flex-shrink-0 font-semibold",
                types[type].buttonColor,
                {
                  "mt-4": size !== "sm",
                  "ml-4": size === "sm"
                }
              )
            }
            onClick={action.onClick}
          >
            {action.label}
          </Button>
        )}
        {children}
      </div>
    </div>
  )
}

Note.propTypes = {
  type: PropTypes.oneOf(["info", "success", "warning", "error"]).isRequired,
  size: PropTypes.oneOf(["sm", "lg"]),
  /** Only available on `lg` size */
  title: PropTypes.string,
  message: PropTypes.string,
  /** Displays a button. Contains `label` (string) and `onClick` (function) */
  action: PropTypes.object,
  /** Controls if an icon is displayed or not. */
  icon: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.string
  ]),
  className: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ])
}

export function Title({ children, ...props }) {
  const className = cx("font-semibold text-sm text-gray-900 leading-6 mb-1", props.className)

  return <div className={className}>{children}</div>
}
