import {Alert, 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 useMainLayoutUI from "./useMainLayoutUI.js";
import LoadingIndicator from "../Widgets/LoadingIndicator/LoadingIndicator.jsx";

const {Content, Footer, Sider} = Layout;

const MainLayout = () => {
    const mainLayoutData = useMainLayout();
    const mainLayoutUI = useMainLayoutUI(mainLayoutData.user);

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

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

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

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

    return (
        <Layout style={{minHeight: "100vh"}}>
            <Sider
                collapsible={!mainLayoutUI.screens.xs}
                collapsed={mainLayoutUI.collapsed}
                onCollapse={mainLayoutUI.setCollapsed}
                style={{height: "100vh", position: "fixed", left: 0}}
            >
                <div style={{display: "flex", justifyContent: "center", padding: 16}}>
                    <img
                        src="/logo_rounded.png"
                        alt="Логотип"
                        style={{width: mainLayoutUI.collapsed ? 40 : 80, transition: "width 0.2s"}}
                    />
                </div>
                <Menu
                    theme="dark"
                    selectedKeys={[location.pathname]}
                    mode="inline"
                    items={menuItems}
                    onClick={mainLayoutUI.handleMenuClick}
                />
            </Sider>

            <Layout
                style={{marginLeft: mainLayoutUI.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;