/*
    Парус 8 - Панели мониторинга
    Расширение стилистики Button
*/

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

import { getButtonColorStyles } from "../utils"; //Дополнительные функции стилизации
import { P8P_COMPONENT_HEIGHT, P8P_COMPONENT_WIDTH } from "../styles/common"; //Стили - общие

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

//Размеры кнопок
const P8P_BUTTON_SIZE = {
    small: {
        fontSize: "13px",
        padding: "4px 22px"
    },
    medium: {
        fontSize: "14px",
        padding: "6px 22px"
    },
    large: {
        fontSize: "15px",
        padding: "8px 22px"
    },
    default: {
        fontSize: "15px",
        padding: "6px 22px"
    }
};

//Общие стили
const defaultStyles = (theme, size) => ({
    borderRadius: "4px",
    ...theme.typography.P8PButton,
    ...(size ? P8P_BUTTON_SIZE[size] : P8P_BUTTON_SIZE.default)
});

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

//Кастомные кнопки
export const P8P_BUTTONS = ({ theme, color, size }) => ({
    P8PPrimary: {
        ...defaultStyles(theme, size),
        ...getButtonColorStyles(color === "primary" ? "P8PInfo" : color, theme)
    },
    P8PSecondary: {
        ...defaultStyles(theme, size),
        ...getButtonColorStyles(color === "primary" ? "P8PSecondary" : color, theme)
    },
    P8POutlined: {
        ...defaultStyles(theme, size),
        ...getButtonColorStyles(color === "primary" ? "P8PSecondary" : color, theme, true)
    },
    P8PText: {
        ...theme.typography.P8PSubtitle2,
        ...getButtonColorStyles(color === "primary" ? "P8PInfo" : color, theme, true),
        ...(size ? P8P_BUTTON_SIZE[size] : P8P_BUTTON_SIZE.default),
        border: "none"
    },
    P8PDesktopPanel: {
        fontSize: "12px",
        textTransform: "none",
        ...P8P_COMPONENT_WIDTH({ width: "150px" }),
        ...P8P_COMPONENT_HEIGHT({ width: "90px" }),
        // width: "150px",
        // height: "90px",
        flexDirection: "column",
        justifyContent: "flex-start",
        color: theme.palette.P8PDesktop.main,
        "&:hover": { backgroundColor: theme.palette.P8PDesktop.hover }
    }
});

//Наименование кастомных кнопок
export const P8P_BUTTON_VARIANT = {
    PRIMARY: "P8PPrimary",
    SECONDARY: "P8PSecondary",
    OUTLINED: "P8POutlined",
    TEXT: "P8PText",
    DESKTOP_PANEL: "P8PDesktopPanel"
};

//Кастомная стилистика компонента
export const P8P_BUTTON_OVERRIDES = {
    styleOverrides: {
        root: ({ ownerState, theme }) => {
            //Определяем цвет
            const { color, size } = ownerState;
            //Возвращаем варианты
            return {
                variants: Object.entries(P8P_BUTTONS({ theme, color, size })).map(([name, styles]) => ({
                    props: { variant: name },
                    style: styles
                }))
            };
        }
    }
};