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

const { Title, Text } = Typography;

export default function SelectAuthenticator(props: PageProps<Extract<KcContext, { pageId: "select-authenticator.ftl" }>, I18n>) {
    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
    const { url, auth, client } = kcContext;
    const { msg, advancedMsg } = i18n;

    return (
        <Template
            kcContext={kcContext}
            i18n={i18n}
            doUseDefaultCss={doUseDefaultCss}
            classes={classes}
            displayInfo={false}
            headerNode={
                <>
                    {client.attributes.logoUri ? (
                        <Space align="start" direction="vertical">
                            <img
                                src={client.attributes.logoUri}
                                alt={client.name || client.clientId}
                                style={{ maxHeight: "64px", maxWidth: "100%", marginBottom: "20px" }}
                            />
                            <Title level={3}>{msg("loginChooseAuthenticator")}</Title>
                        </Space>
                    ) : (
                        <Title level={3}>{msg("loginChooseAuthenticator")}</Title>
                    )}
                </>
            }
        >
            <form id="kc-select-credential-form" action={url.loginAction} method="post" style={{ padding: '0 15px'}}>
                <List
                    dataSource={auth.authenticationSelections}
                    itemLayout="horizontal"
                    bordered
                    renderItem={authenticationSelection => (
                        <List.Item
                            style={{
                                padding: 0,
            
                            }}
                        >
                            <Button
                                type="text"
                                htmlType="submit"
                                name="authenticationExecution"
                                value={authenticationSelection.authExecId}
                                style={{
                                    width: "100%",
                                    height: "auto",
                                    padding: "16px",
                                    textAlign: "left"
                                }}
                            >
                                <Flex align="start" style={{ width: "100%" }} gap={"middle"}>
                                    <i className={"icon24 " + authenticationSelection.iconCssClass} />
                                    <div style={{ flex: 1 }}>
                                        <Title level={4} style={{ margin: 0 }}>
                                            {advancedMsg(authenticationSelection.displayName)}
                                        </Title>
                                        <Text type="secondary" style={{ wordWrap: "break-word", whiteSpace: "normal" }}>
                                            {advancedMsg(authenticationSelection.helpText)}
                                        </Text>
                                    </div>
                                </Flex>
                            </Button>
                        </List.Item>
                    )}
                />
            </form>
        </Template>
    );
}