/*
    Парус 8 - Панели мониторинга - Редакторы панелей
    Компонент: Таблица значений свойств действия
*/

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, IconButton, Icon, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Typography } from "@mui/material"; //Интерфейсные элементы
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили

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

//Стили
const STYLES = {
    CONTAINER_VARIABLES: { maxHeight: "240px", overflow: "auto", ...APP_STYLES.SCROLL },
    BOX_VARIABLES_INFO: { display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: "10px" },
    TABLE_HEAD_CELL_PROPERTY: { width: "45%", padding: "8px" },
    TABLE_HEAD_CELL_VALUE: { width: "45%", padding: "8px" },
    TABLE_HEAD_CELL_DELETE: { width: "10%", padding: "8px" },
    TABLE_VARIABLES: { maxWidth: "700px", minWidth: "700px" },
    TABLE_ROW_VARIABLES: { "&:last-child td, &:last-child th": { border: 0 } },
    TABLE_CELL_VARIABLES: { padding: "8px 16px" }
};

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

//Таблица значений свойств действия
const P8PCATablePropValues = ({ name, items, propertyCellName, valueCellName, onPropertyCellRender, onValueCellRender, onAddRow, onRowDelete }) => {
    //Формирование представления
    return (
        <>
            <Box sx={STYLES.BOX_VARIABLES_INFO}>
                <Typography pl={1}>{name}</Typography>
                <IconButton onClick={onAddRow}>
                    <Icon>add</Icon>
                </IconButton>
            </Box>
            <TableContainer component={Paper} sx={STYLES.CONTAINER_VARIABLES}>
                <Table sx={STYLES.TABLE_VARIABLES} aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell align="center" sx={STYLES.TABLE_HEAD_CELL_PROPERTY}>
                                {propertyCellName}
                            </TableCell>
                            <TableCell align="center" sx={STYLES.TABLE_HEAD_CELL_VALUE}>
                                {valueCellName}
                            </TableCell>
                            <TableCell align="center" sx={STYLES.TABLE_HEAD_CELL_DELETE}></TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {Array.isArray(items) &&
                            items.map((item, i) => (
                                <TableRow key={i} sx={STYLES.TABLE_ROW_VARIABLES}>
                                    <TableCell align="center" sx={STYLES.TABLE_CELL_VARIABLES}>
                                        {onPropertyCellRender ? onPropertyCellRender(item, i) : null}
                                    </TableCell>
                                    <TableCell align="center" sx={STYLES.TABLE_CELL_VARIABLES}>
                                        {onValueCellRender ? onValueCellRender(item, i) : null}
                                    </TableCell>
                                    <TableCell align="center" sx={STYLES.TABLE_CELL_VARIABLES}>
                                        <IconButton onClick={() => onRowDelete(i)}>
                                            <Icon>clear</Icon>
                                        </IconButton>
                                    </TableCell>
                                </TableRow>
                            ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </>
    );
};

//Контроль свойств - таблица значений свойств действия
P8PCATablePropValues.propTypes = {
    name: PropTypes.string,
    items: PropTypes.array,
    propertyCellName: PropTypes.string,
    valueCellName: PropTypes.string,
    onPropertyCellRender: PropTypes.func,
    onValueCellRender: PropTypes.func,
    onAddRow: PropTypes.func,
    onRowDelete: PropTypes.func
};

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

export { P8PCATablePropValues };
