import { useState } from 'react';
import { createBoard } from '@wixc3/react-board';
import { Alignment, Navbar, Tab, TabId, Tabs } from '@blueprintjs/core';

// board cover
import cover from '../../../../assets/tabs/controlled-mode.svg';

export default createBoard({
    name: 'Tabs',
    Board: () => {
        const [navbarTabId, setNavbarTabId] = useState<TabId>('Home');

        const handleNavbarTabChange = (navbarTabId: TabId) =>
            setNavbarTabId(navbarTabId);

        return (
            <Navbar>
                <Navbar.Group>
                    <Navbar.Heading>
                        Page: <strong>{navbarTabId}</strong>
                    </Navbar.Heading>
                </Navbar.Group>
                <Navbar.Group align={Alignment.RIGHT}>
                    <Tabs
                        animate
                        fill
                        id="navbar"
                        onChange={handleNavbarTabChange}
                        selectedTabId={navbarTabId}
                    >
                        <Tab id="Home" title="Home" />
                        <Tab id="Files" title="Files" />
                        <Tab id="Builds" title="Builds" />
                    </Tabs>
                </Navbar.Group>
            </Navbar>
        );
    },
    tags: ['tabs', 'controlled'],
    cover,
});
