import * as React from 'react';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { Sidenav, Nav, Avatar, Stack, Sidebar, Button, Divider } from 'rsuite';
import DynamicAvatar from '@/components/dynamicAvatar';
import DashboardIcon from '@rsuite/icons/legacy/Dashboard';
import GearCircleIcon from '@rsuite/icons/legacy/GearCircle';
import PcIcon from '@rsuite/icons/Pc';
import { userAuthAtom } from '@/lib/context/user';
import { displayNameFromEmail } from '@/lib/utils/string';
import { useAtom } from 'jotai';
import { withUser } from '../withUser';


const SidePanel: React.FC = () => {
  const [expanded, setExpanded] = React.useState(true);
  const [activeKey, setActiveKey] = React.useState('2');
  const [user, setUser] = useAtom(userAuthAtom);
  const router = useRouter();

  return (
    <Sidebar style={{ maxWidth: 260 }}>
      <Sidenav
        expanded={expanded}
        defaultOpenKeys={['3', '4']}
        appearance="inverse"
        style={{
          height: '100vh',
          width: expanded ? 260 : 56,
        }}
      >
        {/* <Sidenav.Toggle onToggle={expanded => setExpanded(expanded)} style={{ margin: 0 }} /> */}

        <Sidenav.Header style={{ padding: 24 }}>
          <Stack direction={'column'} spacing={8}>
            {withUser(user, (user) => <>
                <DynamicAvatar
                  expanded={expanded}
                  user={user}
                />

                <p>
                  {user.displayName ? user.displayName : displayNameFromEmail(user.email)}
                </p>
              </>)}
          </Stack>
        </Sidenav.Header>

        <Sidenav.Body style={{ marginBottom: 'auto' }}>
          <Nav activeKey={activeKey} onSelect={setActiveKey}>
            <Nav.Item eventKey="1" icon={<PcIcon />} href='/'>
              Home
            </Nav.Item>

            <Nav.Item eventKey="2" icon={<DashboardIcon />}>
              Dashboard
            </Nav.Item>

            <Nav.Menu
              placement="rightStart"
              eventKey="3"
              title="Settings"
              icon={<GearCircleIcon />}
            >
              <Nav.Item eventKey="4-1" as={Link} href='/settings/profile'>Profile</Nav.Item>
              <Nav.Item eventKey="4-2">API</Nav.Item>

            </Nav.Menu>
          </Nav>
        </Sidenav.Body>
      </Sidenav>
    </Sidebar>
  );
}

export default SidePanel;