import * as React from "react";
import Alert, { AlertColor, AlertProps } from "@mui/material/Alert";
import AlertTitle from "@mui/material/AlertTitle";
import { alpha } from "@mui/material/styles";

import { uppercaseFirstLetter } from "@/utils";
import UTMLink from "@/components/Link/UTMLink";

const noteSx = {
  backgroundColor: alpha("#ff630b", 0.1),
};

const tipSx = {
  backgroundColor: alpha("#ffc909", 0.1),
};

export interface CustomAlertTemplateProps {
  title?: string | React.ReactNode;
  children?: React.ReactNode;
  showIcon?: React.ReactNode;
  severity?: AlertColor | "note" | "tip";
  hideTitle?: boolean;
  alertSxProps?: AlertProps["sx"];
}

export function CustomAlertTemplate(props: CustomAlertTemplateProps) {
  const {
    title,
    children,
    severity = "info",
    showIcon,
    hideTitle,
    alertSxProps,
  } = props;

  if (["info", "success", "warning", "error"].includes(severity)) {
    return (
      <Alert
        icon={showIcon ?? false}
        severity={severity as AlertColor}
        className="custom-alert"
        sx={{
          mb: (theme) => theme.spacing(2),
          ...alertSxProps,
        }}
      >
        {!hideTitle && (
          <AlertTitle
            sx={{
              fontWeight: "bold",
            }}
          >
            {title || uppercaseFirstLetter(severity)}
          </AlertTitle>
        )}
        {children}
      </Alert>
    );
  }

  return (
    <>
      <Alert
        icon={showIcon ?? false}
        severity="info"
        className="custom-alert"
        sx={{
          mb: (theme) => theme.spacing(2),
          ...(severity === "note" && noteSx),
          ...(severity === "tip" && tipSx),
          ...alertSxProps,
        }}
      >
        {!hideTitle && (
          <AlertTitle
            sx={{
              fontWeight: "bold",
            }}
          >
            {title || uppercaseFirstLetter(severity)}
          </AlertTitle>
        )}
        {children}
      </Alert>
    </>
  );
}

export function Note(props: Omit<CustomAlertTemplateProps, "severity">) {
  return <CustomAlertTemplate {...props} severity="note" />;
}

export function Tip(props: Omit<CustomAlertTemplateProps, "severity">) {
  return <CustomAlertTemplate {...props} severity="tip" />;
}

export function Info(props: Omit<CustomAlertTemplateProps, "severity">) {
  return <CustomAlertTemplate {...props} severity="info" />;
}

export function SignUpCloudTip() {
  return (
    <Tip>
      💡 Want to go dive in this feature?{" "}
      <UTMLink href="https://tidbcloud.com/free-trial" utmContent="tip">
        Start for Free
      </UTMLink>{" "}
      and try it out for yourself !
    </Tip>
  );
}

export function CompareNote(props: {
  mode?: "better" | "worse";
  children: React.ReactNode;
}) {
  const { mode = "worse", children } = props;

  return (
    <Tip
      hideTitle
      alertSxProps={{
        background: "rgba(175, 175, 175, 0.1)",
        borderLeft: "4px solid rgba(175, 175, 175, 0.2)",
        ...(mode === "better" && {
          background: "rgba(32, 225, 86, 0.2)",
          borderLeft: "4px solid rgba(9, 214, 152, 0.5)",
        }),
      }}
    >
      {children}
    </Tip>
  );
}