import {Layout, Menu, Result} from "antd";
import {Outlet} from "react-router-dom";
import {
    HomeOutlined,
    CalendarOutlined,
    DatabaseOutlined,
    FolderViewOutlined,
    UserOutlined,
    TeamOutlined,
    LogoutOutlined,
    MessageOutlined, ControlOutlined
} from "@ant-design/icons";
import useMainLayout from "./useMainLayout.js";
import LoadingIndicator from "../Widgets/LoadingIndicator/LoadingIndicator.jsx";

const {Content, Footer, Sider} = Layout;

const MainLayout = () => {
    const mainLayoutData = useMainLayout();

    const menuItems = [
        mainLayoutData.getItem("Главная", "/", <HomeOutlined/>),
        mainLayoutData.getItem("Приёмы", "/appointments", <CalendarOutlined/>),
        mainLayoutData.getItem("Выдачи линз", "/issues", <DatabaseOutlined/>),
        mainLayoutData.getItem("Линзы и наборы", "/Lenses", <FolderViewOutlined/>),
        mainLayoutData.getItem("Пациенты", "/Patients", <TeamOutlined/>),
        mainLayoutData.getItem("Рассылки", "/mailing", <MessageOutlined/>),
        {type: "divider"}
    ];

    if (mainLayoutData.user?.role.title === "Администратор") {
        menuItems.push(mainLayoutData.getItem("Панель администратора", "/admin", <ControlOutlined/>));
    }

    menuItems.push(
        mainLayoutData.getItem("Перейти в профиль", "/profile", <UserOutlined/>),
        mainLayoutData.getItem("Выйти", "logout", <LogoutOutlined/>)
    );

    if (mainLayoutData.isUserError) {
        return <Result status="500" title="500" subTitle="Произошла ошибка при загрузке данных"/>
    }

    return (
        <Layout style={{minHeight: "100vh"}}>
            {mainLayoutData.screens.xs ? (
                <>
                    <Content style={{
                        margin: "0 8px",
                        padding: 24,
                        flex: 1,
                        overflow: "auto",
                        background: "#fff",
                        borderRadius: 8,
                        marginTop: "8px"
                    }}>
                        {mainLayoutData.isUserLoading ? (
                            <LoadingIndicator/>
                        ) : (
                            <Outlet/>
                        )}
                    </Content>
                    <Layout.Header style={{
                        position: "fixed",
                        bottom: 0,
                        left: 0,
                        right: 0,
                        display: "flex",
                        alignItems: "center",
                        padding: "0 16px",
                        background: "#001529",
                        zIndex: 1000
                    }}>
                        <div style={{display: "flex", alignItems: "center", paddingRight: 16}}>
                            <img
                                src="/logo_rounded.png"
                                alt="Логотип"
                                style={{width: 40}}
                            />
                        </div>
                        <Menu
                            theme="dark"
                            mode="horizontal"
                            selectedKeys={[mainLayoutData.location.pathname]}
                            items={menuItems}
                            onClick={mainLayoutData.handleMenuClick}
                            style={{flex: 1, minWidth: 0}}
                        />
                    </Layout.Header>
                    <Footer style={{textAlign: "center", padding: "12px 0", marginBottom: 48}}>
                        Visus+ © {new Date().getFullYear()}
                    </Footer>
                </>
            ) : (
                <>
                    <Sider
                        collapsible={!mainLayoutData.screens.xs}
                        collapsed={mainLayoutData.collapsed}
                        onCollapse={mainLayoutData.setCollapsed}
                        style={{height: "100vh", position: "fixed", left: 0, overflow: "auto"}}
                    >
                        <div style={{display: "flex", justifyContent: "center", padding: 16}}>
                            <img
                                src="/logo_rounded.png"
                                alt="Логотип"
                                style={{width: mainLayoutData.collapsed ? 40 : 80, transition: "width 0.2s"}}
                            />
                        </div>
                        <Menu
                            theme="dark"
                            selectedKeys={[location.pathname]}
                            mode="inline"
                            items={menuItems}
                            onClick={mainLayoutData.handleMenuClick}
                        />
                    </Sider>

                    <Layout
                        style={{marginLeft: mainLayoutData.collapsed ? 80 : 200, transition: "margin-left 0.2s"}}
                    >
                        <Content style={{
                            margin: "0 16px",
                            padding: 24,
                            minHeight: "100vh",
                            overflow: "auto",
                            background: "#fff",
                            borderRadius: 8,
                            marginTop: "15px"
                        }}>
                            {mainLayoutData.isUserLoading ? (
                                <LoadingIndicator/>
                            ) : (
                                <Outlet/>
                            )}
                        </Content>
                        <Footer style={{textAlign: "center"}}>Visus+ © {new Date().getFullYear()}</Footer>
                    </Layout>
                </>
            )}

        </Layout>
    );
};

export default MainLayout;