import {Form, Input, Button, Row, Col, Typography} from "antd";
import {useSelector} from "react-redux";
import useLoginPage from "./useLoginPage.js";
import useLoginPageUI from "./useLoginPageUI.js";

const {Title} = Typography;

const LoginPage = () => {
    const {error} = useSelector((state) => state.auth);
    const {onFinish, isLoading} = useLoginPage();
    const {containerStyle, formContainerStyle, titleStyle, errorStyle, labels} = useLoginPageUI();

    return (
        <Row justify="center" align="middle" style={containerStyle}>
            <Col xs={24} sm={18} md={12} lg={8} xl={6}>
                <div style={formContainerStyle}>
                    <Title level={2} style={titleStyle}>
                        {labels.title}
                    </Title>

                    {error && (
                        <div style={errorStyle}>
                            {labels.errorPrefix}
                            {error}
                        </div>
                    )}

                    <Form name="login" initialValues={{remember: true}} onFinish={onFinish}>
                        <Form.Item
                            name="login"
                            rules={[{required: true, message: labels.loginRequired}]}
                        >
                            <Input placeholder={labels.loginPlaceholder}/>
                        </Form.Item>

                        <Form.Item
                            name="password"
                            rules={[{required: true, message: labels.passwordRequired}]}
                        >
                            <Input.Password placeholder={labels.passwordPlaceholder}/>
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block loading={isLoading}>
                                {labels.submitButton}
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Col>
        </Row>
    );
};

export default LoginPage;