import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useEffect, useContext, useState, } from 'react';
import { useTranslation } from 'react-i18next';
import { Tabs } from 'antd';
import { InspectedEntityContext } from '../../providers';
import { persistentStorage } from '../../../persistent-storage';
import { TabsCSS } from '../../common-styles/tabs.style';
import { ScenesExplorer, TemplatesExplorer } from './components';
import { ExplorerStyled } from './explorer.style';
export const Explorer = () => {
    const { t } = useTranslation();
    const { type, path } = useContext(InspectedEntityContext);
    const [activeTab, setActiveTab] = useState(() => persistentStorage.get('explorer.activeTab', 'scene'));
    const handleChange = useCallback((activeKey) => {
        setActiveTab(activeKey);
        persistentStorage.set('explorer.activeTab', activeKey);
    }, []);
    useEffect(() => {
        if (type) {
            handleChange(type === 'actor' ? 'scene' : type);
        }
    }, [path]);
    return (_jsx(ExplorerStyled, { children: _jsxs(Tabs, { css: TabsCSS, type: "card", activeKey: activeTab, onChange: handleChange, destroyInactiveTabPane: true, children: [_jsx(Tabs.TabPane, { tab: t('explorer.tab.scenes'), children: _jsx(ScenesExplorer, {}) }, "scene"), _jsx(Tabs.TabPane, { tab: t('explorer.tab.templates'), children: _jsx(TemplatesExplorer, {}) }, "template")] }) }));
};
