/*
    Парус 8 - Панели мониторинга - Редакторы панелей
    Компонент: Панель инструментов редактора
*/

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { IconButton, Icon, Stack, Grid } from "@mui/material"; //Интерфейсные компоненты MUI

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

//Структура элемента панели инструментов редактора
const P8P_EDITOR_TOOL_BAR_ITEM_SHAPE = PropTypes.shape({
    icon: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    disabled: PropTypes.bool,
    onClick: PropTypes.func.isRequired,
    customRenderer: PropTypes.func
});

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

//Панель инструментов редактора
const P8PEditorToolBar = ({ items = [] }) => {
    //Формирование представления
    return (
        <Stack direction={"row"} p={1}>
            <Grid container columns={items.length}>
                {items.map((item, i) => (
                    <Grid item size={{ xs: 2, sm: 4, md: 4 }} key={i}>
                        {item.customRenderer ? (
                            item.customRenderer({ icon: item.icon, title: item.title, disabled: item?.disabled === true, onClick: item.onClick })
                        ) : (
                            <IconButton onClick={item.onClick} title={item.title} disabled={item?.disabled === true}>
                                <Icon>{item.icon}</Icon>
                            </IconButton>
                        )}
                    </Grid>
                ))}
            </Grid>
        </Stack>
    );
};

//Контроль свойств компонента - Панель инструментов редактора
P8PEditorToolBar.propTypes = {
    items: PropTypes.arrayOf(P8P_EDITOR_TOOL_BAR_ITEM_SHAPE)
};

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

export { P8PEditorToolBar };