'use client';
import React, { useState } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  AuditOutlined,
  DashboardOutlined,
  DatabaseOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import { useRouter } from "next/navigation";
import TopBar from "../components/Topbar";
const { Header, Sider, Content } = Layout;

const Dashboard = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  const router = useRouter();
  function handleNav(route: string) {
    router.push(route);
  }
  return (
    <>
    <TopBar />
    <main className="flex min-h-screen flex-col">
      <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="demo-logo-vertical" />
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            items={[
              {
                key: '1',
                icon: <DashboardOutlined />,
                label: 'Dashboard',
                onClick: () => {
                  handleNav('/dashboard');
                }
              },
              {
                key: '2',
                icon: <DatabaseOutlined />,
                label: 'My Data',
                onClick: () => {
                  handleNav('/mydata');
                }
              },
              {
                key: '3',
                icon: <AuditOutlined />,
                label: 'Reports',
                onClick: () => {
                  handleNav('/reports');
                }
              },
            ]}
          />
        </Sider>
        <Layout>
          <Header style={{ padding: 0, background: colorBgContainer }}>
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
          </Header>
          <Content
            style={{
              margin: '24px 16px',
              padding: 24,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {children}
          </Content>
        </Layout>
      </Layout>
    </main >
    </>
  );
}

export default Dashboard;