import {Button, Card, Col, Row, Typography, Result} from "antd";
import {EditOutlined, UserOutlined} from "@ant-design/icons";
import LoadingIndicator from "../../Widgets/LoadingIndicator/LoadingIndicator.jsx";
import useProfilePage from "./useProfilePage.js";
import useProfilePageUI from "./useProfilePageUI.js";
import UpdateUserModalForm from "../../Dummies/UpdateUserModalForm/UpdateUserModalForm.jsx";

const ProfilePage = () => {
    const {
        userData,
        isLoading,
        isError,
    } = useProfilePage();

    const {
        containerStyle,
        cardStyle,
        buttonStyle,
        handleEditUser,
    } = useProfilePageUI(userData);

    if (isError) {
        return (
            <Result
                status="error"
                title="Ошибка"
                subTitle="Произошла ошибка при загрузке данных профиля"
            />
        );
    }

    return (
        <div style={containerStyle}>
            {isLoading ? (
                <LoadingIndicator/>
            ) : (
                <>
                    <Typography.Title level={1}>
                        <UserOutlined/> {userData.last_name} {userData.first_name}
                    </Typography.Title>
                    <Typography.Title level={1}>Профиль</Typography.Title>
                    <Card style={cardStyle}>
                        <Row gutter={[16, 16]}>
                            <Col span={24}>
                                <Typography.Text strong>Фамилия: </Typography.Text>
                                <Typography.Text>{userData.last_name || "-"}</Typography.Text>
                            </Col>
                            <Col span={24}>
                                <Typography.Text strong>Имя: </Typography.Text>
                                <Typography.Text>{userData.first_name || "-"}</Typography.Text>
                            </Col>
                            <Col span={24}>
                                <Typography.Text strong>Отчество: </Typography.Text>
                                <Typography.Text>{userData.patronymic || "-"}</Typography.Text>
                            </Col>
                            <Col span={24}>
                                <Typography.Text strong>Логин: </Typography.Text>
                                <Typography.Text>{userData.login || "-"}</Typography.Text>
                            </Col>
                        </Row>
                        <Button
                            type="primary"
                            icon={<EditOutlined/>}
                            onClick={handleEditUser}
                            style={{...buttonStyle, marginTop: 16}}
                        >
                            Редактировать
                        </Button>
                    </Card>

                    <UpdateUserModalForm/>
                </>
            )}
        </div>
    );
};

export default ProfilePage;