"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const core_1 = require("@material-ui/core");
const react_router_1 = require("react-router");
const utils_1 = require("../utils");
const NavigateNext_1 = tslib_1.__importDefault(require("@material-ui/icons/NavigateNext"));
const constants_1 = require("../constants");
const ahooks_1 = require("ahooks");
const global_1 = tslib_1.__importDefault(require("../theme/global"));
function WxPage({ children, title, renderRight, buttonTitle, buttonIcon, menu, onButtonClick, }) {
    var _a;
    const [theme, setTheme] = react_1.useState(((_a = localStorage.getItem(constants_1.THEME_KEY)) === null || _a === void 0 ? void 0 : _a.replace(/"/g, '')) || constants_1.THEME.LIGHT);
    global_1.default();
    ahooks_1.useEventListener('wxeap_theme', e => {
        console.log(e);
        setTheme(e.detail.theme);
    }, { target: window });
    const location = react_router_1.useLocation();
    const paths = react_1.useMemo(() => {
        return location.pathname.split('/');
    }, [location.pathname]);
    const buttonEl = react_1.useMemo(() => {
        if (!renderRight && !buttonTitle && !onButtonClick)
            return null;
        return (renderRight || (react_1.default.createElement(core_1.Button, { startIcon: buttonIcon, onClick: onButtonClick, color: "primary", variant: "contained" }, buttonTitle)));
    }, [renderRight, buttonTitle, onButtonClick]);
    return (
    // <ThemeProvider theme={createTheme(theme)}>
    react_1.default.createElement(core_1.Box, { display: "flex", p: 4, flexDirection: "column", height: "100%" },
        react_1.default.createElement(core_1.Grid, { component: core_1.Box, container: true },
            react_1.default.createElement(core_1.Grid, { item: true, xs: 12, md: 10, lg: 8 },
                react_1.default.createElement(core_1.Breadcrumbs, { separator: react_1.default.createElement(NavigateNext_1.default, { fontSize: "small" }) }, paths.map((key, index) => {
                    return (react_1.default.createElement(core_1.Typography, { key: index, color: index === paths.length - 1 ? 'textPrimary' : 'inherit' }, utils_1.getMenuItemNameByKey(key, menu)));
                })),
                react_1.default.createElement(core_1.Box, { mt: 1 },
                    react_1.default.createElement(core_1.Typography, { variant: "h3", color: "textPrimary" }, title || utils_1.getMenuItemNameByKey(paths[paths.length - 1], menu)))),
            buttonEl && (react_1.default.createElement(core_1.Grid, { item: true, xs: 12, md: 2, lg: 4 },
                react_1.default.createElement(core_1.Box, { p: 1, display: "flex", justifyContent: "flex-end" }, buttonEl)))),
        react_1.default.createElement(core_1.Box, { flex: 1, mt: 3 }, children))
    // </ThemeProvider>
    );
}
exports.default = WxPage;
