import React, {useState } from 'react';
import { useAtom } from 'jotai';
import { activePageAtom, roomFilterAtom } from '../state/main';
import { Navbar, Text, Group, ThemeIcon, Button, UnstyledButton } from '@mantine/core';
import { Link } from 'react-router-dom';
import { createStyles } from '@mantine/styles';
import { BsMap } from 'react-icons/bs'


const useStyles = createStyles((theme) => ({
    button: {
      display: 'block',
      width: '100%',
      padding: theme.spacing.xs,
      borderRadius: theme.radius.sm,
      color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
      backgroundColor: 'transparent',
  
      '&:hover': {
        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],
      },
    },
    activeButton: {
        display: 'block',
        width: '100%',
        padding: theme.spacing.xs,
        borderRadius: theme.radius.sm,
        color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
        backgroundColor: theme.colors.blue,
    
        // '&:hover': {
        //   backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.blue[4],
        // },
      },
  }));



function SideBar(props) {
    const { classes } = useStyles();
    const [activePage, setActivePage] = useAtom(activePageAtom)
    const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)

    const changeView = (newView) => {
        if (newView === "rooms") {
            setRoomFilter({})
        }
        setActivePage(newView)
    }


    return (
        <Navbar
            padding="md"
            // Breakpoint at which navbar will be hidden if hidden prop is true
            hiddenBreakpoint="sm"
            // Hides navbar when viewport size is less than value specified in hiddenBreakpoint
            hidden={!props.opened}
            width={{ base: 200, breakpoints: { sm: '100%', lg: 300 } }}
        >
            <Button leftIcon={<BsMap />} variant="white" className={activePage === "locations" ? classes.activeButton : classes.button} component={Link} to="/locations" onClick={() => setActivePage("locations")} >
                Locations
            </Button>

            {/* <UnstyledButton component={Link} to="/locations" className={activePage === "locations" ? classes.activeButton : classes.button} >
                <Group>
                    <BsMap />
                    <Text>Locations</Text>
                </Group>

            </UnstyledButton> */}
            <UnstyledButton component={Link} to="/rooms" className={activePage === "rooms" ? classes.activeButton : classes.button} onClick={() => changeView("rooms")} >
                <Group>
                    <BsMap />
                    <Text>Rooms</Text>
                </Group>

            </UnstyledButton>
           
        </Navbar>
    )
}

  

export default SideBar