import {
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"
import { Separator } from "@/components/ui/separator"

import { NetworkTabProps, App, OptionsNetworkTabHealthContent } from "@/types"
import { IconWeb3 } from "@/components/IconWeb3"
import { Skeleton } from "@/components/ui/skeleton"

type NetworkContentProps = {
    health?: OptionsNetworkTabHealthContent
    apps: App[]
    network: string
}

const NetworkContent: React.FC<NetworkContentProps> = ({
    network,
    health,
    apps,
}) => {
    return (
        <div className="w-full max-w-full">
            <div className="grid grid-cols-2 gap-y-2">
                <>
                    <div className="col-span-1 font-bold">Latest block</div>
                    {health?.bestBlockHeight?.toLocaleString("en-US") ? (
                        <div
                            className="col-span-1 text-accent"
                            data-testid={`${network}-blockheight`}
                            data-blockheight={health?.bestBlockHeight}
                        >
                            {health?.bestBlockHeight?.toLocaleString("en-US")}
                        </div>
                    ) : (
                        <Skeleton className="w-16 h-full bg-background" />
                    )}
                </>
                <>
                    <div className="col-span-1 font-bold">Light Client</div>
                    <div className="flex items-center col-span-1">
                        {health?.isSyncing ? (
                            <span className="animate-pulse text-accent">Synchronizing</span>
                        ) : (
                            "Synchronized"
                        )}
                    </div>
                </>
                <Separator className="col-span-2 my-2 border-accent" />
                <>
                    <div className="col-span-1">Network State</div>
                    <div className="col-span-1 text-accent capitalize">{health?.status}</div>
                </>
                <Separator className="col-span-2 my-2 border-accent" />
                <>
                    <div className="col-span-1 font-bold">Available Peers</div>
                    <div className="col-span-1">{health?.peers}</div>
                </>
                <>
                    <div className="col-span-1 font-bold">Current Connections</div>
                    <div className="col-span-1">{apps.length}</div>
                </>
                <>
                    <div className="col-span-1"></div>
                    <div className="col-span-1">
                        {apps.map((app) => (
                            <div className="flex" key={app.url}>
                                {app.url}
                            </div>
                        ))}
                    </div>
                </>
            </div>
        </div>
    )
}

const NetworkTab: React.FC<NetworkTabProps> = ({
    name,
    isWellKnown,
    health,
    apps,
}) => {
    return (
        <AccordionItem className="bg-muted rounded px-4" value={name}>
            <AccordionTrigger>
                <div className="flex items-center space-x-2">
                    <IconWeb3 isWellKnown={isWellKnown}>{name}</IconWeb3>
                </div>
            </AccordionTrigger>
            <AccordionContent>
                <NetworkContent health={health} apps={apps} network={name} />
            </AccordionContent>
        </AccordionItem>
    )
}

export default NetworkTab
