import { Button, Center, Input, Spinner } from "@chakra-ui/react";
import "../../resources/styles/loginPage.scss"
import { observer } from "mobx-react"
import { LoginPageStore } from "./LoginPageStore";

const store = new LoginPageStore();
export const LoginPage = observer(() => {
    return (
        <div className="container_wrapper">
            <div className="login_container">
                <h1>Вход</h1>
                {store.isLoading
                    ? <>
                        <div style={{
                            height: 128,
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center'
                        }}>
                            <Spinner size="xl" />
                        </div>
                    </>
                    : <>
                        <Input
                            placeholder="Логин"
                            value={store.login}
                            onChange={e => store.setLogin(e.target.value)}
                            marginBottom={5} />
                        <Input
                            placeholder="Пароль"
                            type="password"
                            marginBottom={7}
                            value={store.password}
                            onChange={e => store.setPassword(e.target.value)} />
                    </>}
                <Center paddingBottom={7}>
                    <Button
                        onClick={() => store.handleLogin()}
                        isLoading={store.isLoading}
                        loadingText={"Захожу..."}
                        variant='outline'
                        size='md'
                        width={100}>Войти
                    </Button>
                </Center>
            </div>
        </div>);
})