/*
    Парус 8 - Панели мониторинга
    Компонент: Рабочее пространство
*/

//---------------------
//Подключение библиотек
//---------------------

import React, { useState } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import {
    AppBar,
    CssBaseline,
    Icon,
    Box,
    Toolbar,
    IconButton,
    Typography,
    Drawer,
    List,
    ListItemButton,
    ListItemIcon,
    ListItemText,
    Divider
} from "@mui/material"; //Интерфейсные компоненты
import { P8PPanelsMenuDrawer, P8P_PANELS_MENU_PANEL_SHAPE } from "./p8p_panels_menu"; //Меню
import { APP_STYLES } from "../../app.styles"; //Типовые стили

//---------
//Константы
//---------

//Высота главного меню
const APP_BAR_HEIGHT = "64px";

//Стили
const STYLES = {
    DRAWER: { [`& .MuiDrawer-paper`]: { ...APP_STYLES.SCROLL } },
    ROOT_BOX: { display: "flex" },
    APP_BAR: { position: "fixed" },
    APP_BAR_MAIN_BOX: { display: "flex", width: "100vw", alignItems: "center", justifyContent: "space-between" },
    APP_BAR_LEFT_SIDE: { display: "flex", alignItems: "center", justifyContent: "flex-start" },
    APP_BAR_RIGHT_SIDE: { display: "flex", alignItems: "center", justifyContent: "flex-end" },
    APP_BAR_BUTTON: { mr: 2 },
    MAIN: { flexGrow: 1 }
};

//-----------
//Тело модуля
//-----------

//Рабочее пространство
const P8PAppWorkspace = ({
    children,
    panels = [],
    selectedPanel,
    caption,
    showAppBar = true,
    showAppBarSettings = true,
    closeCaption,
    homeCaption,
    settingsCaption,
    onHomeNavigate,
    onItemNavigate,
    onSettingsDialog
} = {}) => {
    //Собственное состояния
    const [open, setOpen] = useState(false);

    //Отработка открытия бокового меню
    const handleDrawerOpen = () => {
        setOpen(true);
    };

    //Отработка закрытия бового меню
    const handleDrawerClose = () => {
        setOpen(false);
    };

    //Отработка нажатия на домашнюю страницу
    const handleHomeClick = () => (onHomeNavigate ? onHomeNavigate() : null);

    //Отработка нажатия на элемент бокового меню
    const handleItemNavigate = panel => {
        handleDrawerClose();
        onItemNavigate ? onItemNavigate(panel) : null;
    };

    //Отработка нажатия на элемент открытия параметров
    const handleSettingsDialog = (panel = null) => onSettingsDialog(panel);

    //Генерация содержимого
    return (
        <Box sx={STYLES.ROOT_BOX}>
            {showAppBar && (
                <>
                    <CssBaseline />
                    <AppBar sx={STYLES.APP_BAR}>
                        <Toolbar>
                            <Box sx={STYLES.APP_BAR_MAIN_BOX}>
                                <Box sx={STYLES.APP_BAR_LEFT_SIDE}>
                                    <IconButton
                                        color="inherit"
                                        aria-label="open drawer"
                                        onClick={open ? handleDrawerClose : handleDrawerOpen}
                                        edge="start"
                                        sx={STYLES.APP_BAR_BUTTON}
                                    >
                                        <Icon>{open ? "chevron_left" : "menu"}</Icon>
                                    </IconButton>
                                    <Typography variant="h6" noWrap component="div">
                                        {caption || selectedPanel?.caption}
                                    </Typography>
                                </Box>
                                <Box sx={STYLES.APP_BAR_RIGHT_SIDE}>
                                    {showAppBarSettings && selectedPanel.showUserSettings ? (
                                        <IconButton
                                            color="inherit"
                                            aria-label="open drawer"
                                            onClick={() => handleSettingsDialog(selectedPanel.name)}
                                            edge="end"
                                            sx={STYLES.APP_BAR_BUTTON}
                                        >
                                            <Icon>settings</Icon>
                                        </IconButton>
                                    ) : null}
                                </Box>
                            </Box>
                        </Toolbar>
                    </AppBar>
                    <Drawer anchor="left" open={open} onClose={handleDrawerClose} sx={STYLES.DRAWER}>
                        <List>
                            <ListItemButton onClick={handleDrawerClose}>
                                <ListItemIcon>
                                    <Icon>close</Icon>
                                </ListItemIcon>
                                <ListItemText primary={closeCaption} />
                            </ListItemButton>
                            <ListItemButton onClick={handleHomeClick}>
                                <ListItemIcon>
                                    <Icon>home</Icon>
                                </ListItemIcon>
                                <ListItemText primary={homeCaption} />
                            </ListItemButton>
                            <Divider component="li" />
                            <ListItemButton onClick={() => handleSettingsDialog()}>
                                <ListItemIcon>
                                    <Icon>settings</Icon>
                                </ListItemIcon>
                                <ListItemText primary={settingsCaption} />
                            </ListItemButton>
                        </List>
                        <P8PPanelsMenuDrawer panels={panels} selectedPanel={selectedPanel} onItemNavigate={handleItemNavigate} />
                    </Drawer>
                </>
            )}
            <main style={STYLES.MAIN}>
                {showAppBar && <Toolbar />}
                {children}
            </main>
        </Box>
    );
};

//Контроль свойств - Рабочее пространство
P8PAppWorkspace.propTypes = {
    children: PropTypes.element,
    panels: PropTypes.arrayOf(P8P_PANELS_MENU_PANEL_SHAPE).isRequired,
    selectedPanel: P8P_PANELS_MENU_PANEL_SHAPE,
    caption: PropTypes.string,
    showAppBar: PropTypes.bool,
    showAppBarSettings: PropTypes.bool,
    closeCaption: PropTypes.string.isRequired,
    homeCaption: PropTypes.string.isRequired,
    settingsCaption: PropTypes.string.isRequired,
    onHomeNavigate: PropTypes.func,
    onItemNavigate: PropTypes.func,
    onSettingsDialog: PropTypes.func
};

//----------------
//Интерфейс модуля
//----------------

export { APP_BAR_HEIGHT, P8PAppWorkspace };
