import type {Route} from "../../.react-router/types/app/pages/+types/HomePage";
import {flexLeftWeight, iconMStyle, marginRound, maxWidth} from "~/styles";
import {
    Button,
    em,
    Flex,
    Group,
    Image,
    Input,
    MantineProvider,
    PasswordInput,
    Stack,
    Text,
    TextInput
} from "@mantine/core";
import {useForm} from "@mantine/form";
import {useEffect, useState} from "react";
import AccountIcon from "mdi-react/AccountIcon";
import LockIcon from "mdi-react/LockIcon";
import {Link} from "react-router";
import { useNavigate } from "react-router";
import {apiPing, apiPingWithPassword} from "~/utils/compare_api.ts";
import {showErrorMessage, showInfoMessage} from "~/utils/utils";
import {DashboardPageType} from "~/utils/enums.ts";
import GlobalAffix from "~/components/GlobalAffix.tsx";
import WebIcon from "mdi-react/WebIcon";



export function meta({}: Route.MetaArgs) {
    return [
        { title: "Login" },
        { name: "description", content: "Login page" },
    ];
}

export default function Component() {
    const form = useForm({
        initialValues: {
            // serverAddress: 'http://127.0.0.1:9520',
            serverAddress: 'https://api-grpc-vs-rest.yanfeng.uk',
            password: ''
        },

        validate: {
            serverAddress: (value) => (value.length == 0 ? "Input the server address." : null),
            password: (value) => (value.length == 0 ? "Input your password." : null),
        },
    });

    const [isLoggingIn, setIsLoggingIn] = useState(false);

    const navigate = useNavigate();

    const onClickLogin = (values: {serverAddress:string, password: string}) => {
        setIsLoggingIn(true)
        apiPingWithPassword(values.serverAddress, values.password)
            .then((res) => {
                if (!res.success) {
                    showErrorMessage(res.message, "Login failed")
                    return
                }
                else {
                    navigate(DashboardPageType.Dashboard)
                }
            })
            .catch((e) => showErrorMessage(e.toString(), "Login error"))
            .finally(() => setIsLoggingIn(false))
    }

    return (
        <Flex gap="md" align="center" justify="center" p={em(20)} h="100vh" w="100vw">
            <Stack align="stretch" justify="center" gap="md" style={{...flexLeftWeight, maxWidth: "800px"}}>
                <Text size="1.5em" fw={700}>Log in</Text>

                <form onSubmit={form.onSubmit((values) => onClickLogin(values))}>
                    <Stack gap="xs">
                        {/*<TextInput*/}
                        {/*    withAsterisk*/}
                        {/*    label="Username"*/}
                        {/*    placeholder="Username"*/}
                        {/*    leftSection={<AccountIcon style={iconMStyle}/>}*/}
                        {/*    {...form.getInputProps('userName')}*/}
                        {/*/>*/}

                        <TextInput
                            withAsterisk
                            label="Test Server Address"
                            placeholder="Server Address"
                            leftSection={<WebIcon style={iconMStyle}/>}
                            {...form.getInputProps('serverAddress')}
                        />

                        <PasswordInput
                            withAsterisk
                            label="Password"
                            placeholder="Password"
                            leftSection={<LockIcon style={iconMStyle}/>}
                            {...form.getInputProps('password')}
                        />

                        <Text size="sm" c="dimmed" ta="right">
                            Forgot Password?
                        </Text>

                        <Group justify="space-between">
                            {/*<Button onClick={() => navigate(DashboardPageType.RegisterPage)}>Register</Button>*/}
                            <Button type="submit" disabled={isLoggingIn}>Login</Button>
                        </Group>
                    </Stack>
                </form>

                <GlobalAffix/>
            </Stack>
        </Flex>
    )
}