import { css, styled } from "../../theme";
import { pxToRem } from "../../utils";
import type { CSSSingleVariant } from "../../theme";

export const chipVariantsStyles = {
  primary: {
    backgroundColor: "$off-white-9-opaque",
    "&:is(button)": {
      "&:hover:enabled": {
        borderColor: "$dark-off-white",
      },
      "&:active:enabled": {
        borderColor: "$dark-off-white",
        backgroundColor: "$off-white-18-opaque",
      },
    },
  },
  secondary: {
    backgroundColor: "$off-white-3-opaque",
    color: "$off-white-72",
    borderColor: "$off-white-9",
    "&:is(button)": {
      "&:hover:enabled": {
        backgroundColor: "$off-white-3-opaque",
        color: "$light-off-white",
        borderColor: "$off-white-72",
      },
      "&:active:enabled": {
        backgroundColor: "$off-white-9-opaque",
        color: "$light-off-white",
        borderColor: "$light-off-white",
      },
    },
  },
  ghost: {
    backgroundColor: "$light-chromia-dark",
    borderColor: "$off-white-18",
  },
} satisfies CSSSingleVariant;

type ChipVariantProps = {
  variant?: keyof typeof chipVariantsStyles;
};

export const chipDefaultVariants = {
  variant: "primary",
} satisfies ChipVariantProps;

const chipStyle = css({
  display: "inline-flex",
  alignItems: "center",
  height: "$4",
  px: "$2",
  borderRadius: "$round",
  borderWidth: pxToRem(1),
  borderStyle: "solid",
  fontWeight: "$bold",
  fontSize: "$1",
  fontFamily: "$text",
  color: "$light-off-white",
  borderColor: "$off-white-72",

  "&:is(button)": {
    cursor: "pointer",
    userSelect: "none",
    "&:disabled": {
      opacity: 0.36,
      cursor: "not-allowed",
    },
  },

  variants: {
    variant: chipVariantsStyles,
  },

  defaultVariants: chipDefaultVariants,
});

export const styledChip = styled("div", chipStyle);