import { useEffect } from "react";
import { Button, List, Typography, Flex } from "antd";
import type { PageProps } from "keycloakify/login/pages/PageProps";
import type { KcContext } from "../KcContext";
import type { I18n } from "../i18n";

const { Text } = Typography;

export default function FrontchannelLogout(props: PageProps<Extract<KcContext, { pageId: "frontchannel-logout.ftl" }>, I18n>) {
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
    const { logout } = kcContext;
    const { msg, msgStr } = i18n;

    useEffect(() => {
        if (logout.logoutRedirectUri) {
            window.location.replace(logout.logoutRedirectUri);
        }
    }, []);

    return (
        <Template
            kcContext={kcContext}
            i18n={i18n}
            doUseDefaultCss={doUseDefaultCss}
            classes={classes}
            documentTitle={msgStr("frontchannel-logout.title")}
            headerNode={msg("frontchannel-logout.title")}
        >
            <Flex vertical style={{ width: "100%", padding: "0 15px" }} gap={"middle"}>
                <Text>{msg("frontchannel-logout.message")}</Text>

                <List
                    dataSource={logout.clients}
                    bordered
                    renderItem={client => (
                        <List.Item>
                            <Typography.Text>{client.name}</Typography.Text>
                            <iframe src={client.frontChannelLogoutUrl} style={{ display: "none" }} />
                        </List.Item>
                    )}
                />

                {logout.logoutRedirectUri && (
                    <Button type="primary" id="continue" href={logout.logoutRedirectUri} size="large">
                        {msg("doContinue")}
                    </Button>
                )}
            </Flex>
        </Template>
    );
}