import PropTypes from "prop-types";
import { Badge, Flex, Tag } from "antd";
import { useMemo } from "react";

const StateTag = ({ state, showBadge = true, style = {} }) => {
  const { badgeStatus, badgeText } = useMemo(() => {
    let status = "default";
    let text = "Unknown";

    switch (state) {
      case "online":
        status = "success";
        text = "Online";
        break;
      case "standby":
        status = "success";
        text = "Standby";
        break;
      case "complete":
        status = "success";
        text = "Complete";
        break;
      case "offline":
        status = "default";
        text = "Offline";
        break;
      case "shutdown":
        status = "default";
        text = "Shutdown";
        break;
      case "initializing":
        status = "warning";
        text = "Initializing";
        break;
      case "printing":
        status = "processing";
        text = "Printing";
        break;
      case "paused":
        status = "warning";
        text = "Paused";
        break;
      case "cancelled":
        status = "error";
        text = "Cancelled";
        break;
      case "loading":
        status = "processing";
        text = "Uploading";
        break;
      case "processing":
        status = "processing";
        text = "Processing";
        break;
      case "ready":
        status = "success";
        text = "Ready";
        break;
      case "unconsumed":
        status = "success";
        text = "Unconsumed";
        break;
      case "inactive":
        status = "default";
        text = "Inactive";
        break;
      case "connecting":
        status = "warning";
        text = "Connecting";
        break;
      case "error":
        status = "error";
        text = "Error";
        break;
      case "startup":
        status = "warning";
        text = "Startup";
        break;
      case "draft":
        status = "default";
        text = "Draft";
        break;
      case "failed":
        status = "error";
        text = "Failed";
        break;
      case "queued":
        status = "warning";
        text = "Queued";
        break;
      case "downloading":
        status = "processing";
        text = "Downloading";
        break;
      case "downloaded":
        status = "success";
        text = "Downloaded";
        break;
      default:
        status = "default";
        text = state || "Unknown";
    }

    return { badgeStatus: status, badgeText: text };
  }, [state]);

  return (
    <Tag color={badgeStatus} style={{ marginRight: 0, ...style }}>
      <Flex gap={6}>
        {showBadge && <Badge status={badgeStatus} />}
        {badgeText}
      </Flex>
    </Tag>
  );
};

StateTag.propTypes = {
  state: PropTypes.string,
  showBadge: PropTypes.bool,
  style: PropTypes.object,
};

export default StateTag;
