"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const components_1 = require("@bluebase/components");
const helpers_1 = require("../../helpers");
const core_1 = require("@bluebase/core");
const components_2 = require("../../components");
const path_to_regexp_1 = require("path-to-regexp");
const lodash_get_1 = tslib_1.__importDefault(require("lodash.get"));
const react_router_dom_1 = require("react-router-dom");
const baseOptions = {
    showIcon: true,
    showLabel: true,
    labelStyle: {},
    style: {},
    tabStyle: {},
};
exports.TabNavigator = (props) => {
    const { children, routes } = props;
    // Extract Contexts
    const { theme } = core_1.useTheme();
    const location = react_router_dom_1.useLocation();
    const { navigator: mainNavigator } = react_1.useContext(components_2.MainNavigatorContext);
    const navigation = core_1.useNavigation();
    const screenProps = helpers_1.useScreenProps();
    // Options
    const tabBarOptions = core_1.merge(baseOptions, props.tabBarOptions || {});
    // Resolve active tab index
    const currentIndex = routes.findIndex((route) => {
        const toPath = path_to_regexp_1.compile(route.path);
        return location.pathname.startsWith(toPath(lodash_get_1.default(location, 'state', {})));
    });
    // onChange listener
    const onChange = (_e, i) => {
        navigation.push(routes[i].name, navigation.state.params);
    };
    // Render single tab
    const renderTab = (route, index) => {
        const options = helpers_1.resolveRouteOptions(route, props, mainNavigator, {
            navigation,
            screenProps,
            route: Object.assign(Object.assign({}, route), { params: navigation.state.params }),
        });
        const icon = helpers_1.getIcon(core_1.merge(Object.assign({ headerTitle: route.name }, options), { tabBarOptions }), index === currentIndex);
        const title = helpers_1.getTitle(core_1.merge(Object.assign({ headerTitle: route.name }, options), { tabBarOptions }), index === currentIndex);
        return (react_1.default.createElement(components_1.Tab, { icon: icon, label: title, value: index, key: index, styles: {
                // hardcoded for material-ui
                root: { minWidth: 'auto' },
                wrapper: tabBarOptions.tabStyle,
                labelIcon: {
                    minHeight: 48,
                    paddingTop: 6,
                    '& $wrapper > *:first-child': {
                        marginBottom: 0,
                        margin: '0 4px',
                    },
                },
            } }));
    };
    return (react_1.default.createElement(components_1.View, { style: {
            backgroundColor: theme.palette.background.default,
            flex: 1,
        } },
        react_1.default.createElement(components_1.View, { style: [
                {
                    backgroundColor: theme.palette.background.card,
                },
                tabBarOptions.style,
            ] },
            react_1.default.createElement(components_1.Tabs, { value: currentIndex > -1 ? currentIndex : 0, onChange: onChange }, routes.map(renderTab))),
        react_1.default.createElement(components_1.View, { style: { flex: 1 } }, children)));
};
exports.TabNavigator.displayName = 'TabNavigator';
