streamyfin/components/jellyseerr/JellyseerrStatusIcon.tsx

import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useEffect, useState } from "react";
import { TouchableOpacity, View, type ViewProps } from "react-native";
import { MediaStatus } from "@/utils/jellyseerr/server/constants/media";

interface Props {
  mediaStatus?: MediaStatus;
  showRequestIcon: boolean;
  onPress?: () => void;
}

const JellyseerrStatusIcon: React.FC<Props & ViewProps> = ({
  mediaStatus,
  showRequestIcon,
  onPress,
  ...props
}) => {
  const [badgeIcon, setBadgeIcon] =
    useState<keyof typeof MaterialCommunityIcons.glyphMap>();
  const [badgeStyle, setBadgeStyle] = useState<string>();

  // Match similar to what Jellyseerr is currently using
  // https://github.com/Fallenbagel/jellyseerr/blob/8a097d5195749c8d1dca9b473b8afa96a50e2fe2/src/components/Common/StatusBadgeMini/index.tsx#L33C1-L62C4
  useEffect(() => {
    switch (mediaStatus) {
      case MediaStatus.PROCESSING:
        setBadgeStyle(
          "bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100",
        );
        setBadgeIcon("clock");
        break;
      case MediaStatus.AVAILABLE:
        setBadgeStyle(
          "bg-purple-500 border-green-400 ring-green-400 text-green-100",
        );
        setBadgeIcon("check");
        break;
      case MediaStatus.PENDING:
        setBadgeStyle(
          "bg-yellow-500 border-yellow-400 ring-yellow-400 text-yellow-100",
        );
        setBadgeIcon("bell");
        break;
      case MediaStatus.BLACKLISTED:
        setBadgeStyle("bg-red-500 border-white-400 ring-white-400 text-white");
        setBadgeIcon("eye-off");
        break;
      case MediaStatus.PARTIALLY_AVAILABLE:
        setBadgeStyle(
          "bg-green-500 border-green-400 ring-green-400 text-green-100",
        );
        setBadgeIcon("minus");
        break;
      default:
        if (showRequestIcon) {
          setBadgeStyle("bg-green-600");
          setBadgeIcon("plus");
        }
        break;
    }
  }, [mediaStatus, showRequestIcon, setBadgeStyle, setBadgeIcon]);

  return (
    badgeIcon && (
      <TouchableOpacity onPress={onPress} disabled={onPress === undefined}>
        <View
          className={`${badgeStyle ?? "bg-purple-600"} rounded-full h-6 w-6 flex items-center justify-center ${props.className}`}
          {...props}
        >
          <MaterialCommunityIcons name={badgeIcon} size={18} color='white' />
        </View>
      </TouchableOpacity>
    )
  );
};

export default JellyseerrStatusIcon;