import React, {useState } from 'react';
import { useAtom } from 'jotai';
import { activePageAtom, menuOpenedAtom, roomFilterAtom } from '../state/main';
import { Navbar, Group, ScrollArea, createStyles, MediaQuery } from '@mantine/core';
import { LinksGroup } from './sidebar/SidebarLinksGroup';
// import { UserButton } from './sidebar/UserButton';
import { Link } from 'react-router-dom';
import { GoLocation, GoDashboard, GoGear } from 'react-icons/go'
import { BsDoorClosed, BsDiagram2 } from 'react-icons/bs'
import { BiCabinet } from 'react-icons/bi'


const useStyles = createStyles((theme) => ({
    navbar: {
      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
      paddingBottom: 0,
    },
  
    header: {
      padding: theme.spacing.md,
      paddingTop: 0,
      marginLeft: -theme.spacing.md,
      marginRight: -theme.spacing.md,
      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
      borderBottom: `1px solid ${
        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
      }`,
    },
  
    links: {
      marginLeft: -theme.spacing.md,
      marginRight: -theme.spacing.md,
    },
  
    linksInner: {
      paddingTop: theme.spacing.xl,
      paddingBottom: theme.spacing.xl,
    },
  
    footer: {
      marginLeft: -theme.spacing.md,
      marginRight: -theme.spacing.md,
      borderTop: `1px solid ${
        theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
      }`,
    },
}));



  const sideBarData = [
    { label: 'Dashboard', icon: GoDashboard },
    {
      label: 'Locations',
      icon: GoLocation,
      initiallyOpened: true,
      links: [
        { label: 'View Locations', link: '/locations' },
        { label: 'Forecasts', link: '/' },
        { label: 'Outlook', link: '/' },
        { label: 'Real time', link: '/' },
      ],
    },
    {
      label: 'Rooms',
      icon: BsDoorClosed,
      initiallyOpened: true,
      links: [
        { label: 'View Rooms', link: '/rooms' },
        { label: 'Previous releases', link: '/' },
        { label: 'Releases schedule', link: '/' },
      ],
    },
    { label: 'Cabinets', icon: BiCabinet },
    { label: 'Items', icon: BsDiagram2 },
    { label: 'Settings', icon: GoGear },
  ];


function SideBar(props) {
    const { classes } = useStyles();

    const [menuOpened] = useAtom(menuOpenedAtom)




    

    const links = sideBarData.map((item) => <LinksGroup {...item} key={item.label} />);

    return (
        <>
        <MediaQuery smallerThan="md" styles={!menuOpened && { 'display': 'none'}}>
            <Navbar height={800} width={{ sm: 300 }} p="md" className={classes.navbar}>
            {/* <Navbar.Section className={classes.header}>
            <Group position="apart">
                <Logo width={120} />
                <Code sx={{ fontWeight: 700 }}>v3.1.2</Code>
            </Group>
            </Navbar.Section> */}
    
            <Navbar.Section grow className={classes.links} component={ScrollArea}>
            <div className={classes.linksInner}>{links}</div>
            </Navbar.Section>
    
            {/* <Navbar.Section className={classes.footer}>
            <UserButton
                image="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&q=80"
                name="Ann Nullpointer"
                email="anullpointer@yahoo.com"
            />
            </Navbar.Section> */}
        </Navbar>
        </MediaQuery>
        
      </>
    )
}

  

export default SideBar