import React, { useState } from 'react';
import { Group, Box, Collapse, ThemeIcon, Text, UnstyledButton, createStyles } from '@mantine/core';
import { useMediaQuery } from '@mantine/hooks';
import { BiChevronLeft, BiChevronRight } from 'react-icons/bi';
import { useAtom } from 'jotai';
import { activePageAtom, menuOpenedAtom, roomFilterAtom } from '../../state/main';
import { Link } from 'react-router-dom';


const useStyles = createStyles((theme) => ({
  control: {
    fontWeight: 500,
    display: 'block',
    width: '100%',
    padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
    fontSize: theme.fontSizes.sm,

    '&:hover': {
      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
    },
  },

  link: {
    fontWeight: 500,
    display: 'block',
    textDecoration: 'none',
    padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
    paddingLeft: 31,
    marginLeft: 30,
    fontSize: theme.fontSizes.sm,
    color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
    borderLeft: `1px solid ${
      theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]
    }`,

    '&:hover': {
      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[1],
      color: theme.colorScheme === 'dark' ? theme.white : theme.black,
    },
  },

  activeLink: {
    backgroundColor: theme.colorScheme  === 'dark' ? theme.colors.dark[7] : theme.colors.gray[3],
  },

  chevron: {
    transition: 'transform 200ms ease',
  },
}));


export function LinksGroup(props) {
  const { icon: Icon, label, initiallyOpened, links } = props

  const isMobile = useMediaQuery('(max-width: 768px)')
  const hasLinks = Array.isArray(links);
  const [opened, setOpened] = useState(initiallyOpened || false);
  // Navigation State
  const [activePage, setActivePage] = useAtom(activePageAtom)
  const [roomFilter, setRoomFilter] = useAtom(roomFilterAtom)
  const [menuOpened, setMenuOpened] = useAtom(menuOpenedAtom)


  const { classes, theme, cx } = useStyles();

  const ChevronIcon = theme.dir === 'ltr' ? BiChevronRight : BiChevronLeft;

  const navigate = (event, location) => {
    // event.preventDefault()
    if (location === "rooms") {
        setRoomFilter({})
    }
    console.log("navigate to: ", location)
    if (isMobile && menuOpened) {
        setMenuOpened(false)
    }
    setActivePage(location)
    }



  const items = (hasLinks ? links : []).map((link) => (
    <>
        <Link
        component={Link}
        className={activePage === link.label.toLowerCase() ? cx(classes.link, classes.activeLink) : classes.link}
        to={link.link}
        key={link.label}
        onClick={(e) => {navigate(e, link.label.toLowerCase())}}
        >
        {link.label}
        </Link>
    </>
  ));


  return (
    <>
      <UnstyledButton onClick={() => setOpened((o) => !o)} className={classes.control}>
        <Group position="apart" spacing={0}>
          <Box sx={{ display: 'flex', alignItems: 'center' }}>
            <ThemeIcon variant="light" size={30}>
              <Icon size={18} />
            </ThemeIcon>
            <Box ml="md">{label}</Box>
          </Box>
          {hasLinks && (
            <ChevronIcon
              className={classes.chevron}
              size={14}
              style={{
                transform: opened ? `rotate(${theme.dir === 'rtl' ? -90 : 90}deg)` : 'none',
              }}
            />
          )}
        </Group>
      </UnstyledButton>
      {hasLinks ? <Collapse in={opened}>{items}</Collapse> : null}
    </>
  );
}