import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
import { useCallback, useEffect, useContext, useState, useRef, } from 'react';
import { useTranslation } from 'react-i18next';
import { Tabs } from 'antd';
import { persistentStorage } from '../../../persistent-storage';
import { SchemasProvider, InspectedEntityContext } from '../../providers';
import { TabsCSS } from '../../common-styles/tabs.style';
import { EntityInspector, ProjectSettings, Systems } from './tabs';
import { InspectorStyled, TabContentStyled, } from './inspector.style';
export const Inspector = () => {
    const { t } = useTranslation();
    const { path } = useContext(InspectedEntityContext);
    const initialRenderRef = useRef(true);
    const [activeTab, setActiveTab] = useState(() => persistentStorage.get('inspector.activeTab', 'entityInspector'));
    const handleChange = useCallback((activeKey) => {
        setActiveTab(activeKey);
        persistentStorage.set('inspector.activeTab', activeKey);
    }, []);
    useEffect(() => {
        if (initialRenderRef.current) {
            initialRenderRef.current = false;
            return;
        }
        if (path) {
            handleChange('entityInspector');
        }
    }, [path]);
    return (_jsx(SchemasProvider, { children: _jsx(InspectorStyled, { children: _jsxs(Tabs, { css: TabsCSS, type: "card", activeKey: activeTab, onChange: handleChange, children: [_jsx(Tabs.TabPane, { tab: t('inspector.tab.entityInspector'), children: _jsx(TabContentStyled, { children: _jsx(EntityInspector, {}) }) }, "entityInspector"), _jsx(Tabs.TabPane, { tab: t('inspector.tab.systems'), children: _jsx(TabContentStyled, { children: _jsx(Systems, {}) }) }, "systems"), _jsx(Tabs.TabPane, { tab: t('inspector.tab.projectSettings'), children: _jsx(TabContentStyled, { children: _jsx(ProjectSettings, {}) }) }, "projectSettings")] }) }) }));
};
