import {Button, Image, Input, Stack, Text} from "@chakra-ui/react";
import {snakeCase} from "change-case";
import React, {useState} from "react";
import {useNavigate} from "react-router-dom";

interface loginScreenProps {
    bg?: string,
    logo?: string,
    title?: string,
    redirectPath?: string,
    loginButtonColor?: string,
}

const LoginScreenComponent = (props: loginScreenProps) => {

    const navigate = useNavigate();

    /** bg: string = image url 
     * logo: string = image url
     * title: string = title of the login card
     * redirectPath: string (experimental) = to be passed to navigate() function
     * loginButtonColor: string = background color of the login button
     * @param {string} username: username of the user
     * @param {string} password: password of the user
     */
    const { bg, logo, title, redirectPath = "/", loginButtonColor = "black" } = props;
    const [data, setData] = useState({
        email: "",
        password: ""
    })

    return (
        <Stack w="100vw" h="100vh" zIndex={100}
            bg={bg?.startsWith("http") ? "" : bg}
            bgImage={bg?.startsWith("http") ? bg : ""}
            backgroundPosition="center"
            backgroundSize="cover"
            backgroundRepeat="no-repeat">

            {/* Login Form Card */}

            <Stack m="auto" w="380px" p="34px" spacing="28px" alignItems={"center"}
                bg="white" borderRadius={"8px"} border="1px solid #DFE0EB">
                <Image w="120px" h="68px" src={logo} alt="logo" />
                <Text fontSize="24px" fontWeight="bold">{title}</Text>
                <Text fontSize="14px" fontWeight={"600"} color="#ACABAB">Enter your email and password below</Text>

                <Input onChange={(e) => setData({ ...data, email: e.target.value })} type="email" borderRadius={"none"} border="none" borderBottom={"1px solid #DFE0EB"} placeholder="Email" />
                <Input onChange={(e) => setData({ ...data, password: e.target.value })} type="password" borderRadius={"none"} border="none" borderBottom={"1px solid #DFE0EB"} placeholder="Password" />

                <Button bg={loginButtonColor} _hover={{ bg: "white", color: "#000000" }} color="white" mt={4}
                    onClick={() => navigate(`/${snakeCase(redirectPath)}`)}>Login</Button>

                {/* Forgot password link */}
                <Text fontSize="12px" fontWeight={"600"} color="#ACABAB" mt={4}>Forgot your password?</Text>

            </Stack>

        </Stack>
    )
}

export default LoginScreenComponent;