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

import { IconButton } from '@mui/material';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { makeStyles } from 'tss-react/mui';

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

const SIDEBAR_WIDTH = 320;

const useStyles = makeStyles()(theme => ({
  hostsLayout: {
    display: 'flex',
    position: 'relative',
    alignItems: 'flex-start',
    minHeight: 500
  },
  leftColumn: {
    width: SIDEBAR_WIDTH,
    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,
    position: 'relative',
    // 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
  },
  collapseToggle: {
    position: 'absolute',
    top: 8,
    zIndex: 2,
    width: 28,
    height: 28,
    padding: 0,
    border: `1px solid ${theme.palette.divider}`,
    backgroundColor: theme.palette.background.paper,
    color: theme.palette.text.secondary,
    '&:hover': {
      backgroundColor: theme.palette.primary.main,
      borderColor: theme.palette.primary.main,
      color: theme.palette.primary.contrastText
    }
  }
}));

export const HostsApp = () => {
  const { classes } = useStyles();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className={classes.hostsLayout}>
      <IconButton
        className={classes.collapseToggle}
        style={{ left: collapsed ? -12 : SIDEBAR_WIDTH + 11 }}
        size="small"
        aria-label={collapsed ? 'Show host tree' : 'Hide host tree'}
        title={collapsed ? 'Show host tree' : 'Hide host tree'}
        onClick={() => setCollapsed(prev => !prev)}
      >
        {collapsed ? <ChevronRightIcon fontSize="small" /> : <ChevronLeftIcon fontSize="small" />}
      </IconButton>
      {!collapsed && (
        <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>
  );
};
