import React, { useState } from 'react';
import { useInbox } from '../store.js';
import { NotebookList } from './NotebookList.js';
import { NotebookCreateModal } from './NotebookCreateModal.js';

export function Sidebar(): React.ReactElement | null {
  const visible = useInbox((s) => s.sidebarVisible);
  const width = useInbox((s) => s.sidebarWidth);
  const notebooks = useInbox((s) => s.notebooks);
  const selectedId = useInbox((s) => s.selectedNotebookId);
  const selectNotebook = useInbox((s) => s.selectNotebook);
  const [createOpen, setCreateOpen] = useState(false);

  if (!visible) return null;

  return (
    <aside style={{
      width, borderRight: '1px solid #e0e0e0',
      background: '#fafafa', overflowY: 'auto',
      flexShrink: 0
    }}>
      <NotebookList
        notebooks={notebooks}
        selectedId={selectedId}
        onSelect={selectNotebook}
        onCreate={() => setCreateOpen(true)}
      />
      {createOpen && <NotebookCreateModal onClose={() => setCreateOpen(false)} />}
    </aside>
  );
}
