import { fade } from "@material-ui/core/styles";

import { makeStyles } from "../theme";
import { StatusChipProps } from "./types";

const useStyles = makeStyles<StatusChipProps, "label" | "root">(
  (theme) => ({
    label: {
      color: ({ variant }) => {
        switch (variant) {
          case "success":
            return theme.palette.success.main;
          case "warning":
            return theme.palette.warning.main;
          case "neutral":
            return theme.palette.text.hint;
          case "error":
            return theme.palette.error.main;
        }
      },
      fontSize: 16,
      fontWeight: 700,
      padding: theme.spacing(0, 2),
      textTransform: "uppercase",
    },
    root: {
      "&:not(:first-child)": {
        marginLeft: theme.spacing(2),
      },
      background: ({ variant }) => {
        switch (variant) {
          case "success":
            return fade(theme.palette.success.main, 0.2);
          case "warning":
            return fade(theme.palette.warning.main, 0.2);
          case "neutral":
            return fade(theme.palette.text.hint, 0.05);
          case "error":
            return fade(theme.palette.error.main, 0.15);
        }
      },
      borderRadius: 20,
      cursor: "inherit",
      height: ({ size }) => (size === "lg" ? 40 : 32),
    },
  }),
  {
    name: "StatusChip",
  }
);
export default useStyles;