'use client';

import React, { useState } from 'react';
import { Box, FormControl, FormLabel, Paper, Stack, TextField, Typography } from '@mui/material';
import Container from '@/components/common/Container';
import useInput from '@/hooks/useInput';
import { notifyUnknownError } from '@/services/notification';
import { user_requests } from '@/data/user/user.requests';
import { useAuth } from '@/hooks/useAuth';
import BaseButton from '@/components/ui-kit/BaseButton';
import { useRouter } from 'next/navigation';
import { pageLinks } from '@/helpers/constants';
import { useLocale } from 'next-intl';
import { useMyNavigation } from '@/hooks/useMyNavigation';

type Props = {};

const LoginPage = (props: Props) => {
    const locale = useLocale();
    const navigation = useMyNavigation();
    const { login } = useAuth();
    const loginInput = useInput('');
    const passInput = useInput('');
    const [loading, setLoading] = useState(false);

    const onSubmit = async (event: any) => {
        event.preventDefault();

        if (loginInput.value && passInput.value) {
            try {
                setLoading(true);
                const response = await user_requests.login({
                    username: loginInput.value,
                    password: passInput.value,
                });
                login({ accessToken: response.data.data.accessToken });
                navigation.push(pageLinks.dashboard.main.index);
            } catch (error) {
                notifyUnknownError(error);
            } finally {
                setLoading(false);
            }
        }
    };

    return (
        <Box
            sx={{
                padding: '40px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                minHeight: '100vh',
                backgroundColor: '#f1f1f1',
            }}
        >
            <Container>
                <Paper
                    sx={{
                        p: 5,
                        maxWidth: 400,
                        margin: '0 auto',
                        borderRadius: '16px',
                    }}
                    component={'form'}
                    onSubmit={onSubmit}
                >
                    <Stack direction={'row'} justifyContent={'center'} alignItems={'center'} mb={3}>
                        <Typography sx={{ fontSize: '32px', fontWeight: 700, color: '#3489e4' }}>
                            Login
                            {/* <NextLink href={pageLinks.home}>CPost</NextLink> */}
                        </Typography>
                    </Stack>

                    <Stack spacing={2} mb={2}>
                        <label>
                            <FormLabel>Login</FormLabel>
                            <TextField type='text' name='login' onChange={loginInput.onChange} value={loginInput.value} fullWidth />
                        </label>
                        <label>
                            <FormLabel>Password</FormLabel>
                            <TextField type='password' name='password' onChange={passInput.onChange} value={passInput.value} fullWidth />
                        </label>
                    </Stack>

                    <BaseButton onClick={onSubmit} loading={loading} fullWidth size='large'>
                        Send
                    </BaseButton>
                </Paper>
            </Container>
        </Box>
    );
};

export default LoginPage;
