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

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

import { P8P_COMPONENT_SIZE } from "../constants"; //Общие константы стилей
import { getButtonColorStyles } from "../utils"; //Дополнительные функции стилизации

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

//Отступы кнопки заголовка
const P8P_BUTTON_HDR_SIZE = {
    [P8P_COMPONENT_SIZE.SMALL]: "0px 8px",
    [P8P_COMPONENT_SIZE.MEDIUM]: "0px 16px",
    [P8P_COMPONENT_SIZE.LARGE]: "0px 24px"
};

//Размеры кнопок
const P8P_BUTTON_SIZE = {
    [P8P_COMPONENT_SIZE.SMALL]: {
        fontSize: "13px",
        padding: "4px 22px"
    },
    [P8P_COMPONENT_SIZE.MEDIUM]: {
        fontSize: "14px",
        padding: "6px 22px"
    },
    [P8P_COMPONENT_SIZE.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: {
        width: "150px",
        height: "90px",
        fontSize: "12px",
        textTransform: "none",
        flexDirection: "column",
        justifyContent: "flex-start",
        color: theme.palette.P8PDesktop.main,
        "&:hover": { backgroundColor: theme.palette.P8PDesktop.hover }
    },
    P8PHeader: {
        height: "100%",
        width: "100%",
        borderRadius: "0px",
        borderColor: theme.palette.P8PHeader.border,
        boxShadow: "none",
        textTransform: "none",
        color: theme.palette.P8PHeader.link,
        backgroundColor: "transparent",
        padding: P8P_BUTTON_HDR_SIZE[size] || P8P_BUTTON_HDR_SIZE[P8P_COMPONENT_SIZE.LARGE],
        overflow: "hidden",
        "&:hover": { backgroundColor: "inherit", opacity: "0.8" }
    }
});

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

//Кастомная стилистика компонента
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
                }))
            };
        }
    }
};