import React from "react";
import PropTypes from "prop-types";
import styling from "@devcake/styling";
import colors from "./colors";
import { Icon } from "../Icon";

styling.link("components.button.icons.loading", "components.icons.loading");
export interface ButtonProps {
  children: React.ReactNode;
  className?: string;
  disabled?: boolean;
  loading?: boolean;
  color?:
    | "amber"
    | "blue"
    | "cyan"
    | "emerald"
    | "fuchsia"
    | "gray"
    | "green"
    | "indigo"
    | "lightBlue"
    | "lime"
    | "orange"
    | "pink"
    | "purple"
    | "red"
    | "rose"
    | "teal"
    | "violet"
    | "yellow";
  onClick: () => void;
  type: "primary" | "secondary" | "tertiary";
}

export const Button = ({
  children,
  className,
  color,
  onClick,
  type,
  disabled,
  loading,
}: ButtonProps) => (
  <button
    disabled={disabled}
    className={[
      className,
      styling.get(`components.button`),
      disabled ? styling.get("components.button.disabled") : "",
      styling.get(`components.button.${type}`),
      color && !disabled ? colors[color][type] : "",
    ].join(" ")}
    onClick={onClick}
  >
    {loading && (
      <Icon
        icon={styling.get("components.button.icons.loading")}
        className="w-5 h-5 -ml-1 mr-3 animate-spin"
      />
    )}
    {children}
  </button>
);

Button.propTypes = {
  loading: PropTypes.bool,
  disabled: PropTypes.bool,
  children: PropTypes.node.isRequired,
  className: PropTypes.string,
  color: PropTypes.oneOf(Object.keys(colors)),
  onClick: PropTypes.func.isRequired,
  type: PropTypes.oneOf(["primary", "secondary", "tertiary"]).isRequired,
};
Button.defaultProps = {
  onClick: () => null,
  type: "primary",
  disabled: false,
};
