from typing import TYPE_CHECKING, Optional

from ....system.color_manipulator import alpha

from .properties_name import *


if TYPE_CHECKING:
    from ..theme_reducer import ThemeState
    from qtmui.material.styles.create_theme.create_palette import Palette


def button(_theme):
    # Khởi tạo các thông tin cần thiết
    theme: ThemeState = _theme
    theme_palette: Palette = theme.palette

    COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error']
    lightMode = theme.palette.mode == 'light'
    
    
    return {
        'MuiButton': {
            'styles': {
                'root': lambda ownerState: {
                    "colorStyle": {
                        **{
                            _color: {
                                "props": {
                                    "containedVariant": {
                                        color: theme.palette.common.white if lightMode else theme.palette.grey._800,
                                        backgroundColor: getattr(theme.palette, _color).main,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: getattr(theme_palette, _color).dark if lightMode else getattr(theme_palette, _color).light,
                                            },
                                            "checked": {
                                                backgroundColor: getattr(theme_palette, _color).dark if lightMode else getattr(theme_palette, _color).light,
                                            },
                                        }
                                    },
                                    "outlinedVariant": {
                                        border: f"1px solid {alpha(getattr(theme.palette, _color).main, 0.32)}",
                                        backgroundColor: "transparent",
                                        color: getattr(theme.palette, _color).main,
                                        "slots": {
                                            "hover": {
                                                borderColor: alpha(getattr(theme.palette, _color).main, 0.16),
                                            },
                                            "checked": {
                                                borderColor: alpha(getattr(theme.palette, _color).main, 0.16),
                                            },
                                        }
                                    },
                                    "textVariant": {
                                        border: f"1px solid transparent",
                                        backgroundColor: "transparent",
                                        color: getattr(theme.palette, _color).main,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: alpha(getattr(theme.palette, _color).main, 0.16),
                                            },
                                            "checked": {
                                                backgroundColor: alpha(getattr(theme.palette, _color).main, 0.16),
                                            },
                                        }
                                    },
                                    "softVariant": {
                                        border: f"1px solid transparent",
                                        backgroundColor: alpha(getattr(theme.palette, _color).main, 0.16),
                                        color: getattr(theme_palette, _color).dark if lightMode else getattr(theme_palette, _color).light,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: alpha(getattr(theme.palette, _color).main, 0.32),
                                            },
                                            "checked": {
                                                backgroundColor: alpha(getattr(theme.palette, _color).main, 0.32),
                                            },
                                        }
                                    },
                                    "disabledVariant": {
                                        border: f"1px solid transparent",
                                        backgroundColor: alpha(getattr(theme.palette, _color).main, 0.16),
                                        color: getattr(theme_palette, _color).dark if lightMode else getattr(theme_palette, _color).light,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: alpha(getattr(theme.palette, _color).main, 0.32),
                                            },
                                            "checked": {
                                                backgroundColor: alpha(getattr(theme.palette, _color).main, 0.32),
                                            },
                                        }
                                    },
                                },
                            }
                            for _color in COLORS
                        },
                        **{
                            "default": {
                                "props": {
                                    "containedVariant": {
                                        border: "1px solid transparent",
                                        backgroundColor: theme.palette.common.white if not lightMode else theme.palette.grey._800,
                                        color: theme.palette.common.white if lightMode else theme.palette.grey._800,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: theme.palette.common.white if not lightMode else theme.palette.grey._800,
                                            },
                                            "checked": {
                                                backgroundColor: theme.palette.common.white if not lightMode else theme.palette.grey._800,
                                            },
                                        }
                                    },
                                    "outlinedVariant": {
                                        border: "1px solid transparent",
                                        borderColor: alpha(theme_palette.grey._500, 0.32),
                                        color: theme.palette.common.white if not lightMode else theme.palette.grey._800,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: theme_palette.action.hover,
                                            },
                                            "checked": {
                                                backgroundColor: theme_palette.action.hover,
                                            },
                                        }
                                    },
                                    "textVariant": {
                                        border: "1px solid transparent",
                                        borderColor: "transparent",
                                        color: theme.palette.grey._500,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: theme_palette.action.hover,
                                            },
                                            "checked": {
                                                backgroundColor: theme_palette.action.hover,
                                            },
                                        }
                                    },
                                    "softVariant": {
                                        border: "1px solid transparent",
                                        backgroundColor: alpha(theme_palette.grey._500, 0.08),
                                        color: theme.palette.common.white if not lightMode else theme.palette.grey._800,
                                        "slots": {
                                            "hover": {
                                                backgroundColor: alpha(theme_palette.grey._500, 0.24),
                                            },
                                            "checked": {
                                                backgroundColor: alpha(theme_palette.grey._500, 0.24),
                                            },
                                        }
                                    },
                                },
                            },
                        },
                    },

                    "size": {
                        lineHeight: theme.typography.button.lineHeight,
                        fontWeight: theme.typography.button.fontWeight,
                        border: "1px solid transparent",
                        borderRadius: "4px" if ownerState.get("size") == "small" else "6px" if ownerState.get("size") == "medium" else "8px",
                        height: "30px" if ownerState.get("size") == "small" else "36px" if ownerState.get("size") == "medium" else "48px",
                        fontSize: 13 if ownerState.get("size") == "small" else 14 if ownerState.get("size") == "medium" else 15,
                        paddingLeft: "8px" if ownerState.get("size") == "small" else "12px" if ownerState.get("size") == "medium" else "16px",
                        paddingRight: "8px" if ownerState.get("size") == "small" else "12px" if ownerState.get("size") == "medium" else "16px",
                        'textVariant': {
                            paddingLeft: "4px" if ownerState.get("size") == "small" else "8px" if ownerState.get("size") == "medium" else "14px", # mui 4
                            paddingRight: "4px" if ownerState.get("size") == "small" else "8px" if ownerState.get("size") == "medium" else "14px", # mui 4
                        }
                    },
                },
                'icon': {
                    "size": {
                        'small': {
                            width: 16,
                            height: 16,
                        },
                        'medium': {
                            width: 20,
                            height: 20,
                        },
                        'large': {
                            width: 24,
                            height: 24,
                        }
                    }
                },
            },
        },


    }
