import TopNavSidebar from './TopNavSidebar';
import { SpaceShipState } from 'models/spaceship.types';
import React from 'react';
import LftRgtNavSidebar from './LftRgtNavSidebar';
import { useSelector } from 'react-redux';
import { pathNameIsSpaceShipEdit } from 'utils/spaceship';
import { RootState } from 'models';

const NavSideBar = () => {
  const spaceShip = useSelector<RootState>((state) => state.spaceShip) as SpaceShipState;
  const { curPortalBaseInfo } = spaceShip;
  return curPortalBaseInfo?.navBarLayout === 2 ? (
    <TopNavSidebar maxWidth={pathNameIsSpaceShipEdit() ? 'calc(100vw - 380px)' : '100vw'} />
  ) : (
    <LftRgtNavSidebar
      style={{
        order: curPortalBaseInfo?.navBarLayout || 0,
        height: pathNameIsSpaceShipEdit() ? 'calc(100vh - 64px)' : '100vh'
      }}
    />
  );
};

export default NavSideBar;
