device.view.tabs.tsx

import { useAppSelector } from "@hooks";
import { JsonViewer } from "../../../shared/components/json_viewer/view/json_viewer.view";
import { useDeviceTabsViewModel } from "../view_model/device.tabs.viewmodel";

export enum DeviceViewTabValues {
    METADATA = 'metadata',
    YANGMODEL = 'yang_model'
}

export const DeviceViewTabs = (activeTab: DeviceViewTabValues) => {
    const { selected: selectedDevice } = useAppSelector(state => state.device);
    const { jsonYang } = useDeviceTabsViewModel();

    const metadataTab = () => {
        return (
            <div>
                {selectedDevice!.mne!.name}
            </div>
        )
    }

    const yangModelTab = () => {
        return (
            <>
                {jsonYang &&
                    <JsonViewer json={jsonYang} />
                }
            </>
        );
    }

    const renderLoading = () => {
        return (
            <div>
                Loading...
            </div>
        )
    }

    const renderNoDeviceSelected = () => {

        return (
            <div>
                No device selected
            </div>
        )
    }


    return (
        <>
            {selectedDevice?.mne ? (
                <>
                    {activeTab === DeviceViewTabValues.METADATA && metadataTab()}
                    {activeTab === DeviceViewTabValues.YANGMODEL && yangModelTab()}
                </>
            ) :
                selectedDevice ? renderLoading() : renderNoDeviceSelected()
            }

        </>
    );
}