import tinycolor from "@ctrl/tinycolor";
import { ColorThemeKeys } from "design-system/theme/types";
import { ButtonProps, Variants } from "design-system/components/Button";
import { TextProps } from "design-system/components/Text";
import { merge } from "lodash";
import { DefaultButton } from "./createTheme";

export type ButtonVariants = "solid" | "soft" | "outline" | "link" | "icon" | "unstyled";

export type ButtonVariantProps = Record<
  ButtonVariants,
  Partial<ButtonProps> & {
    backgroundColor?: ColorThemeKeys;
    borderColor?: ColorThemeKeys;
    textVariant?: TextProps["variant"];
  }
>;

type Props = {
  themeColor: ColorThemeKeys;
  parentBackGroundColor: string;
  resolveThemeColor: (color: ColorThemeKeys) => string;
  overrides: Partial<ButtonVariantProps>;
  defaultProps: DefaultButton;
  variant: Variants;
};
export function getButtonVariants(
  { themeColor, parentBackGroundColor, resolveThemeColor, overrides, defaultProps, variant }: Props,
  props: ButtonProps
) {
  const variants: ButtonVariantProps = {
    solid: {
      backgroundColor: themeColor,
      borderColor: themeColor,
      textColor: "text-contrast",
      borderWidth: 1,
      width: "100%",
    },
    outline: {
      borderColor: themeColor,
      onPressBorderColor: themeColor,
      textColor: themeColor,
      borderWidth: 1,
      width: "100%",
    },
    soft: {
      backgroundColor: { custom: tinycolor(resolveThemeColor(themeColor)).tint(85).toHex8String() },
      textColor: themeColor,
      borderWidth: 1,
      width: "100%",
    },
    link: {
      height: 30,
      textColor: themeColor,
      borderWidth: 0,
      themeColor: { custom: parentBackGroundColor },
    },
    icon: {
      backgroundColor: themeColor,
      borderColor: themeColor,
      paddingHorizontal: { custom: 0 },
      width: 30,
      height: 30,
      borderRadius: { custom: 30 },
    },
    unstyled: {
      onPressAnimatedScale: 1,
      themeColor: { custom: parentBackGroundColor },
      backgroundColor: { custom: "transparent" },
      borderRadius: { custom: 0 },
      paddingHorizontal: { custom: 0 },
      paddingVertical: { custom: 0 },
      onPressColor: { custom: "transparent" },
    },
  };
  const defaults = merge({}, defaultProps, variants[variant]);
  const merged = merge({}, defaults, overrides[variant]);
  return { ...merged, ...props };
}