import {Button, Col, DatePicker, Flex, Form, Input, Select, Tooltip, Typography} from "antd";
import {UserOutlined, MailOutlined, LockOutlined, InfoCircleOutlined, CalendarOutlined} from "@ant-design/icons";
import useRegisterPage from "./useRegisterPage.js";
import dayjs from "dayjs";

const {Title, Text} = Typography;

const RegisterPage = () => {
    const {
        pageContainerStyle,
        onFinish
    } = useRegisterPage();

    return (
        <Flex vertical align={"center"} justify={"center"}>
            <Col style={pageContainerStyle}>
                <Title>Регистрация</Title>
                <Text type="secondary" style={{display: "block", marginBottom: 24}}>
                    Создайте новый аккаунт для работы с платформой
                </Text>
                
                <Form 
                    name={"register"} 
                    onFinish={onFinish}
                    layout="vertical"
                >
                    <Form.Item
                        label="Имя"
                        name="first_name"
                        rules={[{required: true, message: "Введите имя"}]}
                    >
                        <Input
                            prefix={<UserOutlined />}
                            placeholder="Иван"
                            size="large"
                        />
                    </Form.Item>

                    <Form.Item
                        label="Фамилия"
                        name="last_name"
                        rules={[{required: true, message: "Введите фамилию"}]}
                    >
                        <Input
                            prefix={<UserOutlined />}
                            placeholder="Иванов"
                            size="large"
                        />
                    </Form.Item>

                    <Form.Item
                        label="Email"
                        name="email"
                        rules={[
                            {required: true, message: "Введите email"},
                            {type: "email", message: "Введите корректный email"}
                        ]}
                    >
                        <Input
                            prefix={<MailOutlined />}
                            placeholder="example@mail.com"
                            size="large"
                        />
                    </Form.Item>
                    <Form.Item
                        name="birthdate"
                        label="Дата рождения"
                        rules={[{required: true, message: "Введите дату рождения"}]}
                    >
                        <DatePicker
                            suffixIcon={<CalendarOutlined/>}
                            format="DD.MM.YYYY"
                            style={{width: "100%"}}
                            size="large"
                            maxDate={dayjs()}
                        />
                    </Form.Item>

                    <Form.Item
                        label="Логин"
                        name="login"
                        rules={[{required: true, message: "Введите логин"}]}
                    >
                        <Input
                            prefix={<UserOutlined />}
                            placeholder="Логин"
                            size="large"
                        />
                    </Form.Item>
                    <Tooltip
                        title="Пароль должен содержать не менее 8 символов, включая хотя бы одну букву и одну цифру и один специальный символ"
                    >
                        <Typography.Title level={3} style={{width: 30}}>
                            <InfoCircleOutlined/>
                        </Typography.Title>
                    </Tooltip>

                    <Form.Item
                        label="Пароль"
                        name="password"
                        rules={[
                            {required: true, message: "Введите пароль"},
                            {min: 6, message: "Пароль должен содержать минимум 6 символов"}
                        ]}
                    >
                        <Input.Password 
                            prefix={<LockOutlined />}
                            placeholder="Пароль"
                            size="large"
                        />
                    </Form.Item>

                    <Form.Item
                        label="Подтверждение пароля"
                        name="repeat_password"
                        dependencies={['password']}
                        rules={[
                            {required: true, message: "Подтвердите пароль"},
                            ({getFieldValue}) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('Пароли не совпадают'));
                                },
                            }),
                        ]}
                    >
                        <Input.Password 
                            prefix={<LockOutlined />}
                            placeholder="Подтвердите пароль"
                            size="large"
                        />
                    </Form.Item>

                    <Form.Item style={{marginBottom: 8}}>
                        <Button type="primary" htmlType="submit" block size="large">
                            Зарегистрироваться
                        </Button>
                    </Form.Item>

                    <Form.Item style={{marginBottom: 0, textAlign: "center"}}>
                        <Text type="secondary">
                            Уже есть аккаунт? <a href="/login">Войти</a>
                        </Text>
                    </Form.Item>
                </Form>
            </Col>
        </Flex>
    );
};

export default RegisterPage;