import React from "react";
import PropTypes from "prop-types";
import styling from "@devcake/styling";
import { Button, ButtonProps } from "../Button";

styling.setDefault("components.buttongroup", "");
styling.setDefault("components.buttongroup.outer.left", "");
styling.setDefault("components.buttongroup.outer.right", "");
styling.setDefault("components.buttongroup.inner.left", "rounded-l-none");
styling.setDefault("components.buttongroup.inner.right", "rounded-r-none border-r");

export interface ButtonGroupProps {
  buttons: ButtonProps[];
  color: "amber" | "blue" | "cyan" | "emerald" | "fuchsia" | "gray" | "green" | "indigo" | "lightBlue" | "lime" | "orange" | "pink" | "purple" | "red" | "rose" | "teal" | "violet" | "yellow";
  className?: string;
}

const colors = {
  amber: "border-amber-700",
  blue: "border-indigo-700",
  cyan: "border-cyan-700",
  emerald: "border-emerald-700",
  fuchsia: "border-fuchsua-700",
  gray: "border-gray-700",
  green: "border-green-700",
  indigo: "border-indigo-700",
  lightBlue: "border-lightBlue-700",
  lime: "border-lime-700",
  orange: "border-orange-700",
  pink: "border-pink-700",
  purple: "border-purple-700",
  red: "border-red-700",
  rose: "border-rose-700",
  teal: "border-teal-700",
  violet: "border-violet-700",
  yellow: "border-yellow-700"
};

export const ButtonGroup = ({ buttons, color, className }: ButtonGroupProps) => (
  <div className={[
    className,
    "flex flex-row",
    styling.get("components.buttongroup")
  ].join(" ")}>
    {buttons.map((button, idx) => (
      <Button
        {...button}
        color={button.color ?? color}
        className={[
          styling.get(`components.buttongroup.${idx === 0 ? "outer" : "inner"}.left`),
          styling.get(`components.buttongroup.${idx === buttons.length - 1 ? "outer" : "inner"}.right`),
          colors[color],
          button.className
        ].join(" ")}
      />
    ))}
  </div>
);

ButtonGroup.propTypes = {
  buttons: PropTypes.array.isRequired,
  color: PropTypes.oneOf(Object.keys(colors)),
  className: PropTypes.string
};
ButtonGroup.defaultProps = {
  color: "blue"
};

export default colors;
