import Stack from "@/twui/components/layout/Stack";
import { useContext, useState } from "react";
import { AppContext } from "@/src/pages/_app";
import {
    NormalizedServerObject,
    ParsedDeploymentServiceConfig,
} from "@/src/types";
import Row from "@/twui/components/layout/Row";
import ServiceClusterServer from "./cluster-server";

type Props = {
    service: ParsedDeploymentServiceConfig;
};

export default function ServiceCluster({ service }: Props) {
    const { pageProps } = useContext(AppContext);
    const cluster_servers = service.servers;

    const [targetServer, setTargetServer] = useState<
        NormalizedServerObject | undefined
    >(cluster_servers?.[0]);

    return (
        <Stack className="w-full grid-cell col-span-1 gap-0">
            <Row className="nested-grid-frame xl:grid-cols-2">
                {cluster_servers?.map((server, index) => {
                    return (
                        <ServiceClusterServer
                            server={server}
                            service={service}
                            key={index}
                            wrapperProps={{ className: "grid-cell" }}
                        />
                    );
                })}
            </Row>

            {/* <Row className="p-4">
                {cluster_servers?.map((server, index) => {
                    const is_active =
                        server?.private_ip == targetServer?.private_ip;

                    return (
                        <Button
                            title={`Cluster ${index + 1}`}
                            key={index}
                            color="gray"
                            variant={is_active ? undefined : "outlined"}
                            size="small"
                            onClick={() => {
                                setTargetServer(server);
                            }}
                        >
                            <span
                                className={twMerge(
                                    is_active ? "font-semibold" : "",
                                )}
                            >
                                {server.private_ip}
                            </span>
                        </Button>
                    );
                })}
            </Row>

            {targetServer ? (
                <ServiceClusterServer server={targetServer} service={service} />
            ) : undefined} */}
        </Stack>
    );
}