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

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

import React, { useRef } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import dayjs from "dayjs"; //Работа с датами
import { TextField, Typography, Stack } from "@mui/material"; //Интерфейсные элементы
import { P8P_TYPOGRAPHY_VARIANT } from "../../theme/p8p_typography"; //Варианты шрифтов
import { P8P_TEXT_FIELD_VARIANT } from "../../theme/variants/p8p_text_field_variants"; //Варианты полей ввода
import { P8P_TYPOGRAPHY_MAX_LINES } from "../../theme/styles/typography"; //Стили шрифтов
import { formatDateRF, formatDateTimeRF } from "../../core/utils"; //Общие вспомогательные функции приложения
import { P8P_COMPONENT_SIZE } from "../../theme/constants"; //Общие константы стилей
import { P8PHeaderButtonBase } from "./components/p8p_header_button_base"; //Базовая кнопка заголовка

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

//Типы даты
const P8P_HEADER_DATE_PICKER_TYPE = {
    DATE: "date",
    DATETIME: "datetime-local",
    MONTH: "month",
    WEEK: "week",
    TIME: "time"
};

//Форматирование значения даты
const P8P_HEADER_DATE_PICKER_CONVERTER = {
    [P8P_HEADER_DATE_PICKER_TYPE.DATE]: date => formatDateRF(date),
    [P8P_HEADER_DATE_PICKER_TYPE.DATETIME]: date => formatDateTimeRF(date),
    [P8P_HEADER_DATE_PICKER_TYPE.MONTH]: date => dayjs(date).locale("ru").format("MMMM YYYY"),
    [P8P_HEADER_DATE_PICKER_TYPE.WEEK]: date => {
        //Определяем неделю и год
        const [year, week] = date.split("-W");
        //Строковый формат
        return `${week} неделя ${year}`;
    },
    [P8P_HEADER_DATE_PICKER_TYPE.TIME]: date => date
};

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

//Выбор даты
const P8PHeaderDatePicker = ({ value, placeholder, type = "date", width, onSelect, onClear }) => {
    //Ссылка на поле ввода
    const inputRef = useRef(null);

    //При нажатии на кнопку выбора
    const handleButtonClick = () => inputRef.current.showPicker();

    //При смене значения
    const onChange = e => onSelect && onSelect(e.target.value);

    //Собственное представление кнопки
    const buttonContent = (
        <Stack direction="row" alignItems="center" justifyContent="center" alignContent="center">
            <TextField
                inputRef={inputRef}
                type={type}
                variant="standard"
                value={value}
                onChange={onChange}
                data-variant={P8P_TEXT_FIELD_VARIANT.HIDDEN}
            />
            <Typography
                sx={P8P_TYPOGRAPHY_MAX_LINES({ maxLines: 2 })}
                alignContent="center"
                variant={P8P_TYPOGRAPHY_VARIANT.HEADER}
                title={value ? P8P_HEADER_DATE_PICKER_CONVERTER[type](value) : placeholder}
            >
                {value ? P8P_HEADER_DATE_PICKER_CONVERTER[type](value) : placeholder}
            </Typography>
        </Stack>
    );

    //Генерация содержимого
    return (
        <P8PHeaderButtonBase
            value={value}
            width={width}
            size={P8P_COMPONENT_SIZE.SMALL}
            onClick={handleButtonClick}
            onClear={onClear}
            customButtonContent={buttonContent}
        />
    );
};

//Контроль свойств - Выбор даты
P8PHeaderDatePicker.propTypes = {
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    placeholder: PropTypes.string.isRequired,
    type: PropTypes.oneOf(Object.values(P8P_HEADER_DATE_PICKER_TYPE)),
    width: PropTypes.string,
    onSelect: PropTypes.func,
    onClear: PropTypes.func
};

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

export { P8PHeaderDatePicker, P8P_HEADER_DATE_PICKER_TYPE };