import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
This file is part of the Notesnook project (https://notesnook.com/)

Copyright (C) 2023 Streetwriters (Private) Limited

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
import React, { Children, useMemo, useState } from "react";
import { Button, Flex } from "@theme-ui/components";
export function Tab(props) {
    return _jsx(_Fragment, { children: props.children });
}
export function Tabs(props) {
    const { activeIndex, children, containerProps, onTabChanged } = props;
    const [activeTab, setActiveTab] = useState(activeIndex || 0);
    const tabs = useMemo(() => Children.map(children, (child) => {
        if (React.isValidElement(child))
            return { title: child.props.title, component: child };
    }), [children]);
    return (_jsxs(Flex, { sx: { flexDirection: "column" }, children: [_jsx(Flex, { sx: {
                    mb: 1
                }, children: tabs === null || tabs === void 0 ? void 0 : tabs.map((tab, index) => (_jsx(Button, { variant: "secondary", sx: {
                        flex: 1,
                        p: 0,
                        py: 1,
                        borderRadius: 0,
                        borderTopLeftRadius: "default",
                        borderTopRightRadius: "default",
                        bg: activeTab === index
                            ? "var(--background-secondary)"
                            : "transparent",
                        fontWeight: activeTab === index ? "bold" : "normal",
                        color: "paragraph",
                        ":last-of-type": { mr: 0 },
                        borderBottom: "2px solid",
                        borderBottomColor: activeTab === index ? "accent" : "transparent"
                    }, onClick: () => {
                        setActiveTab(index);
                        onTabChanged === null || onTabChanged === void 0 ? void 0 : onTabChanged(index);
                    }, children: tab.title }, index.toString()))) }), _jsx(Flex, Object.assign({}, containerProps, { children: tabs && tabs[activeTab].component }))] }));
}
