import { Fragment, useContext } from "react";
import { AppContext } from "@/src/pages/_app";
import Divider from "@/twui/components/layout/Divider";
import AdminHero from "@/src/components/general/admin/hero";
import Tag from "@/twui/components/elements/Tag";
import Row from "@/twui/components/layout/Row";
import SignupForm from "../../../auth/signup/(partials)/signup-form";
import Stack from "@/twui/components/layout/Stack";
import DeleteDeplotmentUserButton from "./(partials)/delete-deployment-user-button";
import SSHConnection from "./(sections)/ssh-connection";

export default function Main() {
    const { pageProps } = useContext(AppContext);
    const { deployment_user } = pageProps;

    if (!deployment_user?.id) {
        return null;
    }

    const is_super_admin = Boolean(deployment_user.is_super_admin);

    return (
        <Fragment>
            <AdminHero
                title={
                    <Row>
                        <span>{deployment_user?.first_name}</span>
                        <span>{deployment_user?.last_name}</span>
                        {is_super_admin ? (
                            <Tag className="inline">Super Admin</Tag>
                        ) : null}
                    </Row>
                }
                ctas={
                    <>
                        <DeleteDeplotmentUserButton
                            dep_user={deployment_user}
                            button_props={{ color: "secondary" }}
                        />
                    </>
                }
            />
            <Divider />
            <Stack className="grid-cell-content max-w-[600px]">
                <SignupForm existing_user={deployment_user} />
            </Stack>
            <Divider />
            <SSHConnection/>
        </Fragment>
    );
}
