"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MuiButton = exports.getButtonDisabledBackgroundColor = exports.getButtonBackgroundColor = exports.getButtonPaddingMobile = exports.getButtonPadding = exports.getButtonHeightMobile = exports.getButtonHeight = void 0;
const Button_1 = require("@mui/material/Button");
const Button_2 = require("../../Button");
const SvgIcon_1 = require("../../SvgIcon");
/**
 * Вспомогательная утилита для получения значения из values
 * values - содержит в себе все возможные значения
 * type - значение (ключ), который необходимо получить из values
 * defaultValue - значение по умолчанию, если значение values[type] не найдено
 */
const getValue = ({ type, values, defaultValue }) => {
    if (!type || !values || !defaultValue) {
        return defaultValue || '';
    }
    return values[type] || defaultValue;
};
/**
 * Получить значения для высоты кнопки в зависимости от size параметра
 */
const getButtonHeight = (options) => getValue({
    type: options.size,
    values: {
        [Button_2.ButtonSizes.Large]: '40px',
    },
    defaultValue: '32px',
});
exports.getButtonHeight = getButtonHeight;
/**
 * Получить значения для высоты кнопки мобильной версии в зависимости от size параметра
 */
const getButtonHeightMobile = (options) => getValue({
    type: options.size,
    values: {
        [Button_2.ButtonSizes.Large]: '48px',
    },
    defaultValue: '40px',
});
exports.getButtonHeightMobile = getButtonHeightMobile;
/**
 * Получить значения внутренних отступов кнопки (padding) в зависимости от size параметра
 */
const getButtonPadding = ({ theme, size, }) => {
    return getValue({
        type: size || Button_2.ButtonSizes.Medium,
        values: {
            [Button_2.ButtonSizes.Large]: theme.spacing(2, 3),
        },
        defaultValue: theme.spacing(1, 3),
    });
};
exports.getButtonPadding = getButtonPadding;
/**
 * Получить значения внутренних отступов кнопки мобильной версии (padding) в зависимости от size параметра
 */
const getButtonPaddingMobile = (options) => {
    if (!options.theme) {
        return '16px 24px';
    }
    if (options.variant === Button_2.ButtonVariants.Link) {
        return '0';
    }
    return getValue({
        type: options.size || Button_2.ButtonSizes.Medium,
        values: {
            [Button_2.ButtonSizes.Large]: options.theme.spacing(3, 4),
        },
        defaultValue: options.theme.spacing(2, 3),
    });
};
exports.getButtonPaddingMobile = getButtonPaddingMobile;
/**
 * Получить значения border для кнопок
 */
const getBorder = ({ theme, variant, color, buttonState, selected, disabled, }) => {
    if (disabled) {
        return 'none';
    }
    if (!color || variant !== Button_2.ButtonVariants.Outlined) {
        return 'none';
    }
    if (selected || buttonState === 'active') {
        return `1px solid ${theme.palette[color]['900']};`;
    }
    if (buttonState === 'default') {
        return `1px solid ${color === 'grey' ? theme.palette.components.border.default : theme.palette[color]['300']};`;
    }
    if (buttonState === 'hover') {
        return `1px solid ${theme.palette[color]['700']};`;
    }
    return 'none';
};
const getButtonColor = ({ theme, variant, color, buttonState, selected, }) => {
    const textColorVariants = {
        light: {
            error: {
                default: theme.palette.red['800'],
                hover: theme.palette.red['800'],
                active: theme.palette.red['900'],
                focus: theme.palette.red['800'],
            },
            success: {
                default: theme.palette.green['800'],
                hover: theme.palette.green['800'],
                active: theme.palette.green['900'],
                focus: theme.palette.green['800'],
            },
            primary: {
                default: theme.palette.primary['800'],
                hover: theme.palette.primary['800'],
                active: theme.palette.primary['900'],
                focus: theme.palette.primary['800'],
            },
            warning: {
                default: theme.palette.yellow['800'],
                hover: theme.palette.yellow['800'],
                active: theme.palette.yellow['900'],
                focus: theme.palette.yellow['800'],
            },
            grey: {
                default: theme.palette.grey['900'],
                hover: theme.palette.grey['900'],
                active: theme.palette.grey['900'],
                focus: theme.palette.grey['900'],
            },
        },
        contained: theme.palette.primary.contrastText,
        text: {
            error: {
                default: theme.palette.red['800'],
                hover: theme.palette.red['700'],
                active: theme.palette.red['900'],
                focus: theme.palette.red['800'],
            },
            success: {
                default: theme.palette.green['800'],
                hover: theme.palette.green['700'],
                active: theme.palette.green['900'],
                focus: theme.palette.green['800'],
            },
            primary: {
                default: theme.palette.primary['800'],
                hover: theme.palette.primary['700'],
                active: theme.palette.primary['900'],
                focus: theme.palette.primary['800'],
            },
            warning: {
                default: theme.palette.yellow['800'],
                hover: theme.palette.yellow['700'],
                active: theme.palette.yellow['900'],
                focus: theme.palette.yellow['800'],
            },
            grey: {
                default: theme.palette.grey['800'],
                hover: theme.palette.grey['800'],
                active: theme.palette.grey['900'],
                focus: theme.palette.grey['800'],
            },
        },
        outlined: {
            error: {
                default: theme.palette.red['800'],
                hover: theme.palette.red['700'],
                active: theme.palette.red['900'],
                focus: theme.palette.red['800'],
            },
            success: {
                default: theme.palette.green['800'],
                hover: theme.palette.green['700'],
                active: theme.palette.green['900'],
                focus: theme.palette.green['800'],
            },
            primary: {
                default: theme.palette.primary['800'],
                hover: theme.palette.primary['700'],
                active: theme.palette.primary['900'],
                focus: theme.palette.primary['800'],
            },
            warning: {
                default: theme.palette.yellow['800'],
                hover: theme.palette.yellow['700'],
                active: theme.palette.yellow['900'],
                focus: theme.palette.yellow['800'],
            },
            grey: {
                default: theme.palette.grey['800'],
                hover: theme.palette.grey['700'],
                active: theme.palette.grey['900'],
                focus: theme.palette.grey['800'],
            },
        },
        link: {
            default: theme.palette.components.link.main,
            hover: theme.palette.components.link.hover,
            active: theme.palette.components.link.active,
            focus: theme.palette.components.link.main,
        },
    };
    if (selected &&
        (variant === Button_2.ButtonVariants.Light ||
            variant === Button_2.ButtonVariants.Text ||
            variant === Button_2.ButtonVariants.Outlined) &&
        color) {
        return theme.palette[color]['900'];
    }
    if (variant === Button_2.ButtonVariants.Contained) {
        return textColorVariants.contained;
    }
    if (variant === Button_2.ButtonVariants.Light && color) {
        return textColorVariants.light[color][buttonState];
    }
    if (variant === Button_2.ButtonVariants.Text && color) {
        return textColorVariants.text[color][buttonState];
    }
    if (variant === Button_2.ButtonVariants.Outlined && color) {
        return textColorVariants.outlined[color][buttonState];
    }
    return textColorVariants.link[buttonState];
};
const getButtonBackgroundColor = ({ selected, color, variant, buttonState, theme, }) => {
    const bgColorVariants = {
        light: {
            error: {
                default: theme.palette.red['100'],
                hover: theme.palette.red['200'],
                active: theme.palette.red['300'],
                focus: theme.palette.red['100'],
            },
            success: {
                default: theme.palette.green['100'],
                hover: theme.palette.green['200'],
                active: theme.palette.green['300'],
                focus: theme.palette.green['100'],
            },
            primary: {
                default: theme.palette.primary['100'],
                hover: theme.palette.primary['200'],
                active: theme.palette.primary['300'],
                focus: theme.palette.primary['100'],
            },
            warning: {
                default: theme.palette.yellow['100'],
                hover: theme.palette.yellow['200'],
                active: theme.palette.yellow['300'],
                focus: theme.palette.yellow['100'],
            },
            grey: {
                default: theme.palette.grey['100'],
                hover: theme.palette.grey['200'],
                active: theme.palette.grey['300'],
                focus: theme.palette.grey['100'],
            },
        },
        contained: {
            error: {
                default: theme.palette.red['800'],
                hover: theme.palette.red['700'],
                active: theme.palette.red['900'],
                focus: theme.palette.red['800'],
            },
            success: {
                default: theme.palette.green['800'],
                hover: theme.palette.green['700'],
                active: theme.palette.green['900'],
                focus: theme.palette.green['800'],
            },
            primary: {
                default: theme.palette.primary['800'],
                hover: theme.palette.primary['700'],
                active: theme.palette.primary['900'],
                focus: theme.palette.primary['800'],
            },
            warning: {
                default: theme.palette.yellow['800'],
                hover: theme.palette.yellow['700'],
                active: theme.palette.yellow['900'],
                focus: theme.palette.yellow['800'],
            },
            grey: {
                default: theme.palette.grey['800'],
                hover: theme.palette.grey['700'],
                active: theme.palette.grey['900'],
                focus: theme.palette.grey['800'],
            },
        },
        text: {
            default: 'transparent',
            hover: theme.palette[color ?? 'primary']['100'],
            active: theme.palette[color ?? 'primary']['200'],
            focus: 'transparent',
        },
        outlined: {
            default: 'transparent',
            hover: 'transparent',
            active: theme.palette[color ?? 'primary']['200'],
            focus: 'transparent',
        },
        link: 'transparent',
    };
    if (selected && variant === Button_2.ButtonVariants.Contained && color) {
        return theme.palette[color]['900'];
    }
    if (selected && variant === Button_2.ButtonVariants.Light && color) {
        return theme.palette[color]['300'];
    }
    if (selected &&
        variant !== Button_2.ButtonVariants.Contained &&
        variant !== Button_2.ButtonVariants.Link &&
        variant !== Button_2.ButtonVariants.Light &&
        color) {
        return theme.palette[color]['200'];
    }
    if (variant === Button_2.ButtonVariants.Light && color) {
        return bgColorVariants.light[color][buttonState];
    }
    if (variant === Button_2.ButtonVariants.Contained && color) {
        return bgColorVariants.contained[color][buttonState];
    }
    if (variant === Button_2.ButtonVariants.Text) {
        return bgColorVariants.text[buttonState];
    }
    if (variant === Button_2.ButtonVariants.Outlined) {
        return bgColorVariants.outlined[buttonState];
    }
    return bgColorVariants.link;
};
exports.getButtonBackgroundColor = getButtonBackgroundColor;
const getButtonDisabledBackgroundColor = ({ theme, variant, }) => {
    if (Button_2.ButtonVariants.Link === variant || Button_2.ButtonVariants.Text === variant) {
        return 'transparent';
    }
    return theme.palette.components.disabled;
};
exports.getButtonDisabledBackgroundColor = getButtonDisabledBackgroundColor;
exports.MuiButton = {
    defaultProps: {
        disableRipple: true,
    },
    styleOverrides: {
        root({ ownerState, theme }) {
            if (!ownerState || !theme) {
                return {};
            }
            const variant = ownerState.variant;
            const color = ownerState.color;
            const selected = ownerState.selected;
            const disabled = ownerState.disabled;
            const size = ownerState.size;
            return {
                height: (0, exports.getButtonHeight)({ size }),
                padding: (0, exports.getButtonPadding)({
                    theme,
                    size,
                }),
                [theme.breakpoints.down('sm')]: {
                    height: (0, exports.getButtonHeightMobile)({ size }),
                    padding: (0, exports.getButtonPaddingMobile)({ size, theme, variant }),
                    whiteSpace: 'nowrap',
                },
                color: getButtonColor({
                    selected,
                    theme,
                    variant,
                    color,
                    buttonState: Button_2.ButtonStates.Default,
                }),
                fontWeight: theme.typography.button.fontWeight,
                fontSize: theme.typography.button.fontSize,
                backgroundColor: (0, exports.getButtonBackgroundColor)({
                    selected,
                    theme,
                    color,
                    variant,
                    buttonState: Button_2.ButtonStates.Default,
                }),
                borderRadius: theme.shape.medium,
                '&:hover': {
                    color: getButtonColor({
                        selected,
                        theme,
                        variant,
                        color,
                        buttonState: Button_2.ButtonStates.Hover,
                    }),
                    backgroundColor: (0, exports.getButtonBackgroundColor)({
                        selected,
                        color,
                        variant,
                        theme,
                        buttonState: Button_2.ButtonStates.Hover,
                    }),
                    boxShadow: 'none',
                    border: getBorder({
                        theme,
                        variant,
                        color,
                        buttonState: Button_2.ButtonStates.Hover,
                        selected,
                    }),
                },
                '&:active': {
                    color: getButtonColor({
                        selected,
                        color,
                        variant,
                        theme,
                        buttonState: Button_2.ButtonStates.Active,
                    }),
                    backgroundColor: (0, exports.getButtonBackgroundColor)({
                        selected,
                        color,
                        variant,
                        theme,
                        buttonState: Button_2.ButtonStates.Active,
                    }),
                    border: getBorder({
                        theme,
                        variant,
                        color,
                        buttonState: Button_2.ButtonStates.Active,
                        selected,
                    }),
                    boxShadow: 'none',
                },
                '&:focus-visible': {
                    color: getButtonColor({
                        selected,
                        theme,
                        variant,
                        color,
                        buttonState: Button_2.ButtonStates.Focus,
                    }),
                    backgroundColor: (0, exports.getButtonBackgroundColor)({
                        selected,
                        color,
                        variant,
                        theme,
                        buttonState: Button_2.ButtonStates.Focus,
                    }),
                    outline: `2px solid ${theme.palette.primary['400']}`,
                    outlineOffset: '-2px',
                    boxShadow: 'none',
                },
                border: getBorder({
                    theme,
                    variant,
                    color,
                    buttonState: Button_2.ButtonStates.Default,
                    selected,
                    disabled,
                }),
                [`&.${Button_1.buttonClasses.disabled}`]: {
                    color: theme.palette.grey['500'],
                    backgroundColor: (0, exports.getButtonDisabledBackgroundColor)({
                        theme,
                        variant,
                    }),
                    pointerEvents: 'none',
                    cursor: 'unset',
                    border: 'unset',
                },
                [`&.${Button_2.buttonClassnames.loading}`]: {
                    color: 'transparent',
                    pointerEvents: 'none',
                    cursor: 'unset',
                    backgroundColor: (0, exports.getButtonBackgroundColor)({
                        color,
                        variant,
                        theme,
                        buttonState: Button_2.ButtonStates.Default,
                    }),
                    border: getBorder({
                        theme,
                        variant,
                        color,
                        buttonState: Button_2.ButtonStates.Default,
                        selected,
                        disabled: false,
                    }),
                    [`&.${Button_2.buttonClassnames.disabled}`]: {
                        backgroundColor: (0, exports.getButtonDisabledBackgroundColor)({
                            theme,
                            variant,
                        }),
                        pointerEvents: 'none',
                        cursor: 'unset',
                        border: 'unset',
                    },
                },
                gap: theme.spacing(2),
                textTransform: 'none',
                boxShadow: 'none',
                minWidth: 'auto',
                '&.MuiButton-root .MuiButton-startIcon': {
                    marginRight: 0,
                    marginLeft: 0,
                },
                '&.MuiButton-root .MuiButton-endIcon': {
                    marginRight: 0,
                    marginLeft: 0,
                },
                [`&.MuiButton-root .${SvgIcon_1.svgIconClassnames.root}`]: {
                    fontSize: '20px',
                    [theme.breakpoints.down('sm')]: {
                        fontSize: '24px',
                    },
                },
            };
        },
    },
};
