import * as React from "react";
import Box, { BoxProps } from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import ErrorIcon from "@mui/icons-material/Error";

export interface SQLStatusProps {
  status?: "success" | "error" | "loading";
  label: string;
  content: string | JSX.Element;
  tip?: string | null;
  boxSx?: BoxProps["sx"];
}

export default function SQLStatus(props: SQLStatusProps) {
  const { status, label, content, tip, boxSx } = props;

  return (
    <Box
      sx={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
        gap: "4px",
        ...boxSx,
      }}
    >
      <StatusIcon status={status} />
      <Typography component="span" fontFamily="inherit">
        {label}:
      </Typography>
      <Typography
        component="span"
        fontWeight="bold"
        fontFamily="inherit"
        sx={{ ml: 1 }}
      >
        {content}
      </Typography>
      {tip && (
        <Typography
          component="span"
          sx={{
            ml: 1,
            p: 1,
            fontSize: "12px",
            lineHeight: "15px",
            color: "#FE7A00",
            background: "rgba(255, 206, 160, 0.2)",
            border: "1px dashed #FFCEA0",
            fontFamily: "inherit",
          }}
        >
          {tip}
        </Typography>
      )}
    </Box>
  );
}

export function IndexTip(props: { content: string }) {
  const { content } = props;

  return (
    <>
      <Typography
        component="span"
        sx={{
          ml: 1,
          p: 1,
          fontSize: "12px",
          lineHeight: "15px",
          fontWeight: "bold",
          // color: "#FE7A00",
          background: "rgba(255, 206, 160, 0.2)",
          border: "1px dashed #FFCEA0",
        }}
      >
        {content}
      </Typography>
    </>
  );
}

function StatusIcon(props: { status: SQLStatusProps["status"] }) {
  const { status } = props;

  switch (status) {
    case "success":
      return <CheckCircleIcon sx={{ color: "success.main" }} />;
    case "error":
      return <ErrorIcon sx={{ color: "error.main" }} />;
    case "loading":
    default:
      return null;
  }
}