import { useMemo } from "react"
import { useActiveChains } from "@/hooks/useActiveChains"
import { NetworkTabProps } from "@/types"
import { Layout2 } from "@/components/Layout2"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Accordion } from "@/components/ui/accordion"
import { BottomNavBar, Header } from "../components"
import {
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/ui/accordion"
import { IconWeb3 } from "@/components/IconWeb3"
import { Skeleton } from "@/components/ui/skeleton"

export const Networks = () => {
    const chains = useActiveChains()

    const networks: NetworkTabProps[] = useMemo(
        () =>
        chains.map(({ chainName, isWellKnown, details }) => {
            return {
                isWellKnown,
                name: chainName,
                health: {
                    isSyncing: details[0].isSyncing,
                    peers: details[0].peers,
                    status: "connected",
                    bestBlockHeight: details[0].bestBlockHeight,
                },
                apps: details.map(({ url }) => ({
                    name: url ?? "",
                    url: url,
                })),
            }
        }),
        [chains],
    )

    return (
        <Layout2 innerClassName="bg-muted">
            <Header />
            <div className="flex items-center justify-between px-6 mt-4 mb-4 sm:px-8">
                <h2 className="text-xl font-semibold">Networks</h2>
            </div>

            <ScrollArea className="px-6 mb-4 grow sm:px-8">
                <section>
                    {networks.length ? (
                        <Accordion type="multiple" className="w-full">
                            {networks.map(({ name, health, apps, isWellKnown }, i) => (
                                <AccordionItem value={name} key={i}>
                                    <AccordionTrigger>
                                        <div>
                                            <div className="flex items-center space-x-2">
                                                <div className="text-lg md:text-xl">
                                                    <span className="capitalize" data-testid={`chain${name}`}>{name}</span>
                                                    <span className="pl-2 text-sm text-accent">
                                                        {health.isSyncing ? "(syncing...)" : ""}
                                                    </span>
                                                </div>
                                            </div>

                                        </div>
                                    </AccordionTrigger>
                                    <AccordionContent>
                                        <div className="flex flex-col">
                                            <DataRow
                                                title="Latest block"
                                                data={health?.bestBlockHeight?.toLocaleString("en-US")}
                                                testId="blockheight"
                                            />
                                            <DataRow
                                                title="Available peers"
                                                data={health?.peers}
                                                testId="networkpeers"
                                            />
                                            <DataRow
                                                title="Current connections"
                                                data={apps?.length}
                                                testId="networkconnections"
                                            />
                                            <div className="pt-4">
                                                {apps.map((app) => (
                                                    <div className="flex" key={app.url}>
                                                        {app.url}
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </AccordionContent>
                                </AccordionItem>
                            ))}
                        </Accordion>
                    ) : (
                        <div>There is no open window tab that expects a ghost connection.</div>
                    )}
                </section>
            </ScrollArea>
            <BottomNavBar currentItem="networks" />
        </Layout2>
    )
}

type DataRowInput = {
    title?: string
    data?: any
    testId?: string
}

const DataRow = ({ title, data, testId }: DataRowInput) => {
    return (
        <div className="flex text-sm">
            <span>{title}:</span>
            {data ? (
                <span
                    className="pl-2 text-accent"
                    data-testid={`${name}-${testId}`}
                >
                    {data}
                </span>
            ) : (
                <Skeleton className="w-16 h-full" />
            )}
        </div>
    )
}
