import type {Route} from "../../../.react-router/types/app/pages/dashboard_sub/+types/DashboardLogin";
import {flexLeftWeight, iconMStyle, marginRound, maxWidth} from "~/styles";
import {Button, 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 {apiLogin} from "~/utils/hms_api";
import {getBaseUserInfo, showErrorMessage, showInfoMessage} from "~/utils/utils";
import {DashboardPageType} from "~/utils/hms_enums.ts";



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

export default function Component() {
    const form = useForm({
        initialValues: {
            userName: '',
            password: ''
        },

        validate: {
            userName: (value) => (value.length == 0 ? "Input your username." : null),
            password: (value) => (value.length == 0 ? "Input your password." : null),
        },
    });

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

    const navigate = useNavigate();

    const onClickLogin = (values: {userName: string, password: string}) => {
        setIsLoggingIn(true)
        apiLogin(values.userName, values.password)
            .then((res) => {
                if (!res.success) {
                    showErrorMessage(res.message, "Login failed")
                    return
                }
                res.data?.token && localStorage.setItem("hms_token", res.data?.token)
                const userInfo = getBaseUserInfo(res.data?.user_info)
                showInfoMessage(`Welcome ${userInfo?.title} ${userInfo?.name}`, "Login successful", 3000)
                navigate(DashboardPageType.Home)
                })
            .catch((e) => showErrorMessage(e.toString(), "Login error"))
            .finally(() => setIsLoggingIn(false))
    }

    return (
        <Stack align="stretch" justify="center" gap="md" style={{...flexLeftWeight, "maxWidth": "400px"}}>
            <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')}
                    />

                    <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>

        </Stack>
    )
}