import { useDisclosure } from '@mantine/hooks';
import { IconAt } from '@tabler/icons-react';
import { Paper, Text, TextInput, PasswordInput, Button, rem} from "@mantine/core";
import {useState} from 'react';
import {http} from "../middleware/axiosConfig";
import { useNavigate } from 'react-router-dom';
import {useForm} from 'react-hook-form'


const Login = () => { 

    const navigate = useNavigate();

    const {register, handleSubmit, } = useForm({
        defaultValue: {
            email: '',
            password: ''
        }
    })

    const {formState: { errors }} = useForm();

    const [loginError, setloginError] = useState(false);

    const onLogin = async (e) => {
        try {
            setloginError(false);
            await http.get("/sanctum/csrf-cookie");
            const res = await http.post("/api/login", e);
            if (res.status === 200){
                navigate("/lists"); 
            }
        }
        catch (error) {
            if (error.response.status === 401) {
                setloginError(true);
              }
        }
    };

    const icon = <IconAt style={{ width: rem(16), height: rem(16) }} />;
    const [visible, { toggle }] = useDisclosure(false);

        return (
            <div>
            <Paper shadow="md" radius="md" p="xl" withBorder>
                <Text size="xl" fw={900} variant="gradient"
            gradient={{ from: 'red', to: 'rgba(227, 0, 0, 1)', deg: 227 }}>WELCOME ADMIN!</Text>
                <Text size="sm">Please login to access the Admin Account Management Site</Text>
                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                        <TextInput
                            style={{ width: '400px', marginBottom: '10px', marginTop: '15px' }}
                            label="Email"
                            leftSection={icon}
                            {...register('email')}
                            placeholder="Enter your work email address"
                            error={errors.email ? "Please enter a valid email" : null}
                    /></div>
                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                        <PasswordInput
                            style={{ width: '400px', marginBottom: '10px' }}
                            label="Password"
                            placeholder="Enter your Password"
                            {...register('password')}
                            visible={visible}
                            onVisibilityChange={toggle}
                            error={
                                errors.password
                                  ? "Please enter a valid password"
                                  : null
                              }
                    /></div>
                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                        <Button variant="filled" color="lime" style={{ margin: 25 }} onClick={e => handleSubmit(onLogin)()}>Log In
                        </Button>
                    </div>
                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
                        {loginError && (
                            <Text fw={500} fs="italic" c="red">
                            Login failed! Please verify your credentials and try again.
                            </Text>)}</div>     
            </Paper>
            </div>
        );
};

export default Login;