import { Route, Routes } from 'react-router-dom';

import { makeStyles } from 'tss-react/mui';

import { EmptyState } from './EmptyState';
import { HostDetailPage } from './HostDetailPage';
import { LabelHostListPage } from './LabelHostListPage';
import { LeftSidebar } from './LeftSidebar';

const useStyles = makeStyles()(theme => ({
  hostsLayout: {
    display: 'flex',
    width: '100%',
    alignItems: 'flex-start',
    minHeight: 500
  },
  leftColumn: {
    width: 320,
    flexShrink: 0,
    display: 'flex',
    flexDirection: 'column',
    padding: 12,
    // Sticky so the tree stays visible while the right column scrolls with
    // the page. Height capped to viewport so the inner #astrolabe list can
    // scroll internally when host lists get long.
    position: 'sticky',
    top: 0,
    minHeight: 400,
    maxHeight: '100vh',
    overflow: 'hidden'
  },
  rightColumn: {
    flex: 1,
    minWidth: 0,
    // Stretch the column down to the viewport bottom so the left border
    // draws full-height even when the content (e.g. compliance summary) is
    // short. The parent uses `alignItems: flex-start` for sticky support, so
    // we can't rely on stretch alignment — give the column its own minHeight.
    minHeight: '100vh',
    padding: '0 20px 20px 20px',
    borderLeft: `1px solid ${theme.palette.divider}`,
    // Override the legacy `.right-column { margin-left: 313px }` rule
    // (page-structure.less) which shifts our flex column off-screen.
    marginLeft: '0 !important' as unknown as 0
  }
}));

export const HostsApp = () => {
  const { classes } = useStyles();
  return (
    <div className={classes.hostsLayout}>
      <aside className={classes.leftColumn}>
        <LeftSidebar />
      </aside>
      <main className={`${classes.rightColumn} right-column`}>
        <Routes>
          <Route path="/" element={<EmptyState />} />
          <Route path="label/:label" element={<LabelHostListPage />} />
          <Route path=":hostkey" element={<HostDetailPage />} />
        </Routes>
      </main>
    </div>
  );
};
