import Stack from "@/twui/components/layout/Stack";
import { useContext, useState } from "react";
import { AppContext } from "@/src/pages/_app";
import ServiceCluster from "../(partials)/cluster";
import {
    NormalizedServerObject,
    ParsedDeploymentServiceConfig,
} from "@/src/types";
import Button from "@/twui/components/layout/Button";
import Row from "@/twui/components/layout/Row";
import { twMerge } from "tailwind-merge";
import Select from "@/twui/components/form/Select";
import ServiceClusterServer from "../(partials)/cluster-server";
import H2 from "@/twui/components/layout/H2";
import _ from "lodash";

export default function ServiceClusters() {
    const { pageProps, ws } = useContext(AppContext);
    const { service, deployment, children_services } = pageProps;

    const all_services = [service, ...(children_services || [])];

    const [targetCluster, setTargetCluster] = useState<
        ParsedDeploymentServiceConfig | undefined
    >(service || undefined);
    const clusterIndex =
        all_services.findIndex(
            (srv) => srv?.service_name == targetCluster?.service_name,
        ) + 1;

    const cluster_servers = targetCluster?.servers;

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

    function killAllPorts() {
        ws.sendData({
            event: "client:kill-all-ports",
        });
    }

    return (
        <Stack className="w-full nested-grid-frame grid-cols-1">
            <Stack className="grid-cell gap-0">
                <Row className="grid-cell-content flex-nowrap">
                    <Row className="w-full justify-between">
                        <Row>
                            <H2>Cluster #{clusterIndex}</H2>
                        </Row>
                        <Row>
                            <Select
                                options={all_services.map((srv, index) => ({
                                    value: srv?.service_name!,
                                    title: `Cluster #${index + 1}`,
                                }))}
                                wrapperWrapperProps={{
                                    className: `max-w-[250px]`,
                                }}
                                changeHandler={(v) => {
                                    setTargetCluster(undefined);
                                    killAllPorts();
                                    setTimeout(() => {
                                        setTargetCluster(
                                            all_services.find(
                                                (s) => s?.service_name == v,
                                            ) || undefined,
                                        );
                                    }, 200);
                                }}
                            />

                            {/* {cluster_servers?.[0] ? (
                        <Select
                            options={cluster_servers.map((server) => ({
                                value: server?.private_ip!,
                                title: `${server?.private_ip}`,
                            }))}
                            wrapperWrapperProps={{
                                className: `max-w-[250px]`,
                            }}
                            changeHandler={(v) => {
                                setTargetServer(undefined);
                                setTimeout(() => {
                                    setTargetServer(
                                        cluster_servers.find(
                                            (s) => s?.private_ip == v,
                                        ) || undefined,
                                    );
                                }, 200);
                            }}
                        />
                    ) : undefined} */}
                            {/* {all_services.map((srv, index) => {
                        const is_active =
                            srv?.service_name == targetCluster?.service_name;
                        if (!srv) return null;
                        return (
                            <Button
                                title={`Cluster ${index + 1}`}
                                key={index}
                                color="gray"
                                variant={is_active ? undefined : "outlined"}
                                size="small"
                            >
                                <span
                                    className={twMerge(
                                        is_active ? "font-semibold" : "",
                                    )}
                                >
                                    Cluster {index + 1}
                                </span>
                            </Button>
                        );
                    })} */}
                        </Row>
                    </Row>
                </Row>
                <hr />

                {targetCluster ? (
                    <ServiceCluster service={targetCluster} />
                ) : undefined}

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