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

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

import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { TextField, InputAdornment, Icon, FormControl, IconButton } from "@mui/material"; //Интерфейсные элементы
import { P8P_FORM_CONTROL_HEADER_FIELD } from "../../theme/styles/form_control"; //Стили контекста полей ввода
import { P8P_TEXT_FIELD_VARIANT } from "../../theme/variants/p8p_text_field_variants"; //Варианты полей ввода
import { P8PHeaderItem } from "./components/p8p_header_item"; //Элемент заголовка

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

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

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

//Поле ввода
const P8PHeaderField = ({ value, placeholder, type = "text", endAdornments = [], width, onChange }) => {
    //При смене значения
    const handleChange = e => onChange && onChange(e.target.value);

    //Генерация содержимого
    return (
        <P8PHeaderItem width={width}>
            <FormControl variant="outlined" sx={P8P_FORM_CONTROL_HEADER_FIELD}>
                <TextField
                    type={type}
                    name="header-field"
                    placeholder={placeholder}
                    value={value}
                    variant="standard"
                    data-variant={P8P_TEXT_FIELD_VARIANT.PRIMARY}
                    title={value || placeholder}
                    onChange={handleChange}
                    InputProps={{
                        endAdornment:
                            endAdornments.length > 0 ? (
                                <InputAdornment position="end">
                                    {endAdornments.map((item, index) => (
                                        <IconButton onClick={e => item.onClick(e)} key={index} disabled={item.disabled}>
                                            <Icon>{item.icon}</Icon>
                                        </IconButton>
                                    ))}
                                </InputAdornment>
                            ) : null
                    }}
                />
            </FormControl>
        </P8PHeaderItem>
    );
};

//Контроль свойств - Поле ввода
P8PHeaderField.propTypes = {
    value: PropTypes.any,
    placeholder: PropTypes.string.isRequired,
    type: PropTypes.string,
    endAdornments: PropTypes.arrayOf(P8P_HEADER_FIELD_ADORNMENT_SHAPE),
    width: PropTypes.string,
    onChange: PropTypes.func
};

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

export { P8PHeaderField };