import { css, styled, keyframes } from "../../theme";
import { pxToRem } from "../../utils";
import { body3Variant, body4Variant } from "../text";

const ripple = keyframes({
  to: { transform: "scale(1)" },
});

export const buttonVariants = css({
  variants: {
    variant: {
      primary: {
        backgroundColor: "$light-purple",
        color: "$dark-chromia-dark",
        "@media (hover: hover)": {
          "&:hover:not([disabled])": { backgroundColor: "$dark-purple" },
        },
        "&:focus:not([disabled])": { backgroundColor: "$dark-purple" },
      },
      secondary: {
        backgroundColor: "$off-white-9",
        color: "$light-off-white",
        "@media (hover: hover)": {
          "&:hover:not([disabled])": { backgroundColor: "$off-white-18" },
        },
        "&:focus:not([disabled])": { backgroundColor: "$off-white-18" },
      },
      ghost: {
        "@media (hover: hover)": {
          "&:hover:not([disabled])": { backgroundColor: "$off-white-9" },
        },
        "&:focus:not([disabled])": { backgroundColor: "$off-white-9" },
        color: "$light-off-white",
      },
    },
  },
});

export const buttonSize = css({
  variants: {
    size: {
      l: {
        height: pxToRem(48),
        ...body3Variant,
      },
      s: {
        height: pxToRem(32),
        ...body4Variant,
      },
    },
  },
});

export const buttonRawStyled = {
  position: "relative",
  overflow: "hidden",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  gap: "$2",
  px: "$4",
  borderRadius: pxToRem(24),
  cursor: "pointer",
  "-webkit-tap-highlight-color": "transparent",

  "& span.ripple": {
    position: "absolute",
    pointerEvents: "none",
    borderRadius: "$round",
    backgroundColor: "$off-white-18",
    transform: "scale(0)",
    animation: `${ripple} 500ms cubic-bezier(0.87, 0, 0.13, 1) forwards`,
  },

  "&:focus": {
    boxShadow: `inset 0 0 0 ${pxToRem(4)} $off-white-72`,
  },

  "&:disabled": {
    opacity: "$disabled",
    cursor: "unset",
  },

  defaultVariants: {
    variant: "primary",
  },
};

export const buttonStyle = css(buttonRawStyled);

export const StyledButton = styled("button", buttonStyle, buttonVariants, buttonSize);