import * as React from "react";
import Box from "@mui/joy/Box";
import List from "@mui/joy/List";
import ListSubheader from "@mui/joy/ListSubheader";
import ListItem from "@mui/joy/ListItem";
import ListItemContent from "@mui/joy/ListItemContent";
import ListItemDecorator from "@mui/joy/ListItemDecorator";
import ListItemButton from "@mui/joy/ListItemButton";
import IconButton from "@mui/joy/IconButton";
import Typography from "@mui/joy/Typography";
import Sheet from "@mui/joy/Sheet";
import { closeSidebar } from "~/utils/navigation";
import * as Icon from "react-feather";
import Link from "next/link";
import { useState } from "react";
import { signOut, useSession } from "next-auth/react";

export default function Navigation() {
  const { data: session } = useSession();
  const [selectedPage, setSelectedPage] = useState("");
  return (
    <>
      <Box
        className='SecondSidebar-overlay'
        sx={{
          position: "fixed",
          zIndex: 9998,
          top: 0,
          left: 0,
          width: "100vw",
          height: "100vh",
          bgcolor: "background.body",
          opacity: "calc(var(--SideNavigation-slideIn, 0) - 0.2)",
          transition: "opacity 0.4s",
          transform: {
            xs: "translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--FirstSidebar-width, 0px)))",
            lg: "translateX(-100%)",
          },
        }}
        onClick={() => closeSidebar()}
      />
      <Sheet
        className='SecondSidebar'
        sx={{
          position: {
            xs: "fixed",
            lg: "sticky",
          },
          transform: {
            xs: "translateX(calc(100% * (var(--SideNavigation-slideIn, 0) - 1) + var(--SideNavigation-slideIn, 0) * var(--FirstSidebar-width, 0px)))",
            lg: "none",
          },
          borderRight: "1px solid",
          borderColor: "divider",
          transition: "transform 0.4s",
          zIndex: 9999,
          height: "100dvh",
          top: 0,
          p: 2,
          py: 3,
          flexShrink: 0,
          display: "flex",
          flexDirection: "column",
          gap: 2,
        }}
      >
        <List
          sx={{
            "--List-item-radius": "8px",
            "--List-item-minHeight": "32px",
            "--List-gap": "4px",
          }}
        >
          <ListSubheader role='presentation' sx={{ color: "text.primary" }}>
            Menu
          </ListSubheader>
          <Link href='/counter' onClick={() => setSelectedPage("counter")}>
            <ListItem>
              <ListItemButton
                selected={selectedPage === "counter"}
                variant={selectedPage === "counter" ? "soft" : undefined}
              >
                <ListItemDecorator>
                  <Icon.ShoppingCart />
                </ListItemDecorator>
                <ListItemContent>Balcão</ListItemContent>
              </ListItemButton>
            </ListItem>
          </Link>
          <Link href='/sales' onClick={() => setSelectedPage("sales")}>
            <ListItem>
              <ListItemButton
                selected={selectedPage === "sales"}
                variant={selectedPage === "sales" ? "soft" : undefined}
              >
                <ListItemDecorator>
                  <Icon.DollarSign />
                </ListItemDecorator>
                <ListItemContent>Vendas</ListItemContent>
              </ListItemButton>
            </ListItem>
          </Link>
          <Link href='/registers' onClick={() => setSelectedPage("registers")}>
            <ListItem>
              <ListItemButton
                selected={selectedPage === "registers"}
                variant={selectedPage === "registers" ? "soft" : undefined}
              >
                <ListItemDecorator>
                  <Icon.Book />
                </ListItemDecorator>
                <ListItemContent>Fluxo de Caixa</ListItemContent>
              </ListItemButton>
            </ListItem>
          </Link>
          <Link href='/products' onClick={() => setSelectedPage("products")}>
            <ListItem>
              <ListItemButton
                selected={selectedPage === "products"}
                variant={selectedPage === "products" ? "soft" : undefined}
              >
                <ListItemDecorator>
                  <Icon.List />
                </ListItemDecorator>
                <ListItemContent>Produtos</ListItemContent>
              </ListItemButton>
            </ListItem>
          </Link>
          <Link
            href='/categories'
            onClick={() => setSelectedPage("categories")}
          >
            <ListItem>
              <ListItemButton
                selected={selectedPage === "categories"}
                variant={selectedPage === "categories" ? "soft" : undefined}
              >
                <ListItemDecorator>
                  <Icon.Layers />
                </ListItemDecorator>
                <ListItemContent>Categorias</ListItemContent>
              </ListItemButton>
            </ListItem>
          </Link>
          <Link href='/settings' onClick={() => setSelectedPage("settings")}>
            <ListItem>
              <ListItemButton
                selected={selectedPage === "settings"}
                variant={selectedPage === "settings" ? "soft" : undefined}
              >
                <ListItemDecorator>
                  <Icon.Settings />
                </ListItemDecorator>
                <ListItemContent>Configurações</ListItemContent>
              </ListItemButton>
            </ListItem>
          </Link>
        </List>
        <Box sx={{ pl: 1, mt: "auto", display: "flex", alignItems: "center" }}>
          <div>
            <Typography fontWeight='lg' level='body2'>
              {session?.user.name}
            </Typography>
            <Typography level='body2'>{session?.user.email}</Typography>
          </div>
          <IconButton
            variant='plain'
            sx={{ ml: "auto" }}
            onClick={() => signOut()}
          >
            <Icon.LogOut />
          </IconButton>
        </Box>
      </Sheet>
    </>
  );
}