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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { TextField, Select, MenuItem, FormControl, Box, InputAdornment, IconButton, Icon, FormLabel } from "@mui/material"; //Интерфейсные элементы
import { P8P_CA_OBJECT_VALUE_SHAPE } from "./common"; //Общие ресурсы действий

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

//Стили
const STYLES = {
    CONTAINER: { display: "flex", flexDirection: "column", gap: "10px", alignItems: "center" },
    LEGEND_SETTINGS: { paddingTop: "10px", marginBottom: "-5px" }
};

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

//Поле с выбором типа значения
const P8PCAFieldWithType = ({
    valueTypes,
    item,
    name,
    valueLabel = null,
    groupLabel = null,
    isValueReadOnly = false,
    onTypeChange,
    onValueChange = null,
    endAdornments = []
}) => {
    //Формирование представления
    return (
        <Box sx={STYLES.CONTAINER}>
            {groupLabel ? (
                <FormLabel component="legend" sx={STYLES.LEGEND_SETTINGS}>
                    {groupLabel}
                </FormLabel>
            ) : null}
            <FormControl variant={"standard"} fullWidth>
                <Select name={`${name}_type`} value={item.type} labelId={`${name}-type-label`} onChange={onTypeChange} fullWidth>
                    {valueTypes.map((type, index) => (
                        <MenuItem value={type} key={index}>
                            {type}
                        </MenuItem>
                    ))}
                </Select>
            </FormControl>
            <TextField
                id={`${name}_value`}
                InputLabelProps={{ shrink: true }}
                type={"text"}
                variant={"standard"}
                value={item.value}
                name={`${name}`}
                label={valueLabel}
                onChange={e => {
                    onValueChange && onValueChange(e);
                }}
                fullWidth
                InputProps={{
                    readOnly: isValueReadOnly,
                    endAdornment:
                        endAdornments.length !== 0 ? (
                            <InputAdornment position="end">
                                {endAdornments.map((item, index) => (
                                    <IconButton onClick={e => item.onClick(e)} key={index} disabled={item.isDisabled}>
                                        <Icon>{item.icon}</Icon>
                                    </IconButton>
                                ))}
                            </InputAdornment>
                        ) : null
                }}
            />
        </Box>
    );
};

//Контроль свойств - поле с выбором типа значения
P8PCAFieldWithType.propTypes = {
    valueTypes: PropTypes.array.isRequired,
    item: P8P_CA_OBJECT_VALUE_SHAPE.isRequired,
    name: PropTypes.string.isRequired,
    valueLabel: PropTypes.string,
    groupLabel: PropTypes.string,
    isValueReadOnly: PropTypes.bool,
    onTypeChange: PropTypes.func.isRequired,
    onValueChange: PropTypes.func,
    endAdornments: PropTypes.arrayOf(PropTypes.object)
};

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

export { P8PCAFieldWithType };
