ppc_amnet/amnet-native/components/ICCard.tsx

import {Text} from "react-native";
import {ReactNode, useMemo} from "react";
import {CreditCard, History, Joystick, Keyboard, KeyRound, Tickets} from "lucide-react-native";

import TimeAgo from "./TimeAgo";
import {AMUICard, AMUICardActionProps, AMUICardDetail} from "./AMUICard";

import {AMCardData, AMPhysicalCardData} from "../models/AMCard";
import {AmusementICVendor, ICType} from "../lib/iccard";

export interface ICCardProps extends AMUICardActionProps {
    card: AMCardData,
    children?: ReactNode,
    showFullCardNumber?: boolean
}

export function ICCard(props: ICCardProps) {
    const displayedCardNumber = useMemo(() => props.showFullCardNumber
            ? props.card.code.match(/.{1,4}/g)?.join(" ")
            : `•••• ${props.card.code.substring(props.card.code.length - 4)}`,
        [props.showFullCardNumber, props.card.code]);

    return (
        <AMUICard title={props.card.name} {...props}>
            <PhysicalICInfo physicalCard={props.card.physicalCardData}/>

            <AMUICardDetail>
                <CreditCard size={18} color="gray"/>
                <Text style={{color: "gray", fontFamily: "JetBrainsMono_400Regular"}}>{displayedCardNumber}</Text>
            </AMUICardDetail>

            {props.card.lastUsed && (
                <AMUICardDetail>
                    <History size={18} color="gray"/>
                    <TimeAgo style={{color: "gray"}} dateTo={props.card.lastUsed}/>
                </AMUICardDetail>
            )}
            {props.children}
        </AMUICard>
    );
}

function PhysicalICInfo(props: { physicalCard: AMPhysicalCardData | null }) {
    if (props.physicalCard?.cardType === ICType.Transport) {
        return (
            <AMUICardDetail>
                <Tickets size={18} color="gray"/>
                <Text style={{color: "gray"}}>Transport IC Card</Text>
            </AMUICardDetail>
        )
    }

    if (props.physicalCard?.cardVendor) {
        return (
            <AMUICardDetail>
                <Joystick size={18} color="gray"/>
                <Text style={{color: "gray"}}>{ICVendorName(props.physicalCard.cardVendor)}</Text>
            </AMUICardDetail>
        );
    }

    return null;
}

function ICVendorName(vendor: AmusementICVendor): string {
    switch (vendor) {
        case AmusementICVendor.Sega:
            return "Aime Card";

        case AmusementICVendor.Konami:
            return "e-Amusement Pass";

        case AmusementICVendor.BandaiNamcoGames:
        case AmusementICVendor.BandaiNamcoEntertainment:
            return "Bana Passport";

        case AmusementICVendor.Nesica:
            return "Nesica Card";

        default:
            return "Amusement IC Card";
    }
}