/*
    Парус 8 - Панели мониторинга - Редактор запросов
    Область SQL-выражения
*/

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

import React, { useState, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Fab, Icon, Drawer, IconButton, TextField, Stack, Box, Snackbar, Alert } from "@mui/material"; //Компоненты MUI
import { BUTTONS } from "../../../../../app.text"; //Общие текстовые ресурсы приложения
import { APP_STYLES } from "../../../../../app.styles"; //Общие стили приложения
import { useQuerySQLExpr } from "./hooks"; //Пользовательские хуки для работы с SQL-выражением

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

//Стили
const STYLES = {
    SQL_FAB: {
        position: "absolute",
        bottom: 16,
        right: 16
    },
    SQL_TEXT_FIELD: {
        fontSize: "0.9rem",
        ...APP_STYLES.SCROLL
    },
    SNACKBAR_ALERT: { width: "100%" }
};

//Начальное состояние всплывающего сообщения
const SNACK_BAR_MESSAGE_INIT = { text: null, type: null };

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

//Область SQL-выражения
const InspectorQueryArea = ({ query, substArgsVals = 0, qry = "", qryBnd = "", qryMsg = "" }) => {
    //Собственное состояние - отображение запроса с подстановками
    const [showQryBnd, setShowQryBnd] = useState(substArgsVals);

    //Собственное состояние - текст всплывающего сообщения
    const [snackBarMessage, setSnackBarMessage] = useState(SNACK_BAR_MESSAGE_INIT);

    //Собственное состояние - отображение области SQL запроса
    const [displaySQL, setDisplaySQL] = useState(false);

    //Собственное состояние - развёрнутость
    const [expanded, setExpanded] = useState(false);

    //Работа с SQL-выражением
    const { toggleSubstArgsVals } = useQuerySQLExpr(query);

    //При нажатии на кнопку отображения/сокрытия значений аргументов в SQL-выражении запроса
    const handleToggleSubstArgsValsClick = async () => {
        await toggleSubstArgsVals();
        setShowQryBnd(showQryBnd === 1 ? 0 : 1);
    };

    //При нажатии на кнопку копирования текста запроса
    const handleCopyClick = async () => {
        try {
            await navigator.clipboard.writeText(qry);
            setSnackBarMessage({ text: `Текст запроса скопирован в буфер обмена` });
        } catch (e) {
            setSnackBarMessage({ text: `Ошибка копирования текста запроса в буфер обмена: ${e.message}`, type: "error" });
        }
    };

    //При нажатии на кнопку развёртывания
    const handleExpandClick = () => setExpanded(!expanded);

    //При нажатии на кнопку отображения SQL запроса
    const handleShowSQLClick = () => setDisplaySQL(true);

    //При нажатии на кнопку сокрытия SQL запроса
    const handleCloseSQLClick = () => setDisplaySQL(false);

    //При закрытии всплывающего сообщения
    const handleSnackBarClose = () => setSnackBarMessage(SNACK_BAR_MESSAGE_INIT);

    //Расчет размеров тектовых полей
    const [qryRows, qryMsgRows] = expanded ? [15, 6] : [5, 3];

    //Расчет параметров отображения запроса
    const [dispQry, qryViewTitle, qryViewIcon] =
        showQryBnd === 0 ? [qry, "Отобразить значения аргументов", "code"] : [qryBnd, "Скрыть значения аргументов", "code_off"];

    //При изменении состояние отображения подстановок в запросе
    useEffect(() => setShowQryBnd(substArgsVals), [substArgsVals]);

    //Генерация содержимого
    return (
        <>
            {(qry || qryMsg) && (
                <Fab color={qryMsg ? "warning" : "default"} sx={STYLES.SQL_FAB} title={"Показать текст SQL запроса"} onClick={handleShowSQLClick}>
                    <Icon>join_left</Icon>
                </Fab>
            )}
            {displaySQL && (
                <Drawer open onClose={handleCloseSQLClick} anchor={"bottom"}>
                    <Box p={2}>
                        <Stack direction={"row"} justifyContent={"right"} spacing={2}>
                            {qry && (
                                <>
                                    <IconButton onClick={handleToggleSubstArgsValsClick} title={qryViewTitle}>
                                        <Icon>{qryViewIcon}</Icon>
                                    </IconButton>
                                    <IconButton onClick={handleCopyClick} title={"Скопировать текст запроса"}>
                                        <Icon>content_copy</Icon>
                                    </IconButton>
                                </>
                            )}
                            <IconButton onClick={handleExpandClick} title={expanded ? "Свернуть" : "Развернуть"}>
                                <Icon>{expanded ? "expand_more" : "expand_less"}</Icon>
                            </IconButton>
                            <IconButton onClick={handleCloseSQLClick} title={BUTTONS.HIDE}>
                                <Icon>close</Icon>
                            </IconButton>
                        </Stack>
                        <Stack direction={"column"} spacing={2}>
                            {dispQry && (
                                <TextField
                                    label={"Текст запроса"}
                                    multiline
                                    fullWidth
                                    value={dispQry}
                                    minRows={qryRows}
                                    maxRows={qryRows}
                                    variant={"standard"}
                                    focused
                                    inputProps={{ sx: STYLES.SQL_TEXT_FIELD, disabled: true }}
                                />
                            )}
                            {qryMsg && (
                                <TextField
                                    label={"Предупреждения"}
                                    color={"warning"}
                                    multiline
                                    fullWidth
                                    value={qryMsg}
                                    minRows={qryMsgRows}
                                    maxRows={qryMsgRows}
                                    variant={"standard"}
                                    focused
                                    inputProps={{ sx: STYLES.SQL_TEXT_FIELD, disabled: true }}
                                />
                            )}
                        </Stack>
                    </Box>
                </Drawer>
            )}
            <Snackbar open={Boolean(snackBarMessage.text)} autoHideDuration={3000} onClose={handleSnackBarClose}>
                <Alert severity={snackBarMessage.type || "success"} sx={STYLES.SNACKBAR_ALERT} onClose={handleSnackBarClose}>
                    {snackBarMessage.text}
                </Alert>
            </Snackbar>
        </>
    );
};

//Контроль свойств компонента - Область SQL-выражения
InspectorQueryArea.propTypes = {
    query: PropTypes.number.isRequired,
    substArgsVals: PropTypes.number,
    qry: PropTypes.string,
    qryBnd: PropTypes.string,
    qryMsg: PropTypes.string
};

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

export { InspectorQueryArea };
