import React, { MutableRefObject } from 'react'
import {
  Avatar, Button, Center, ColorMode,
  Divider, Drawer,
  DrawerBody,
  DrawerCloseButton,
  DrawerContent, DrawerFooter,
  DrawerHeader,
  DrawerOverlay, Icon,
  Image, Link,
  Stack, Text,
} from '@chakra-ui/react'
import AdminMode from './authComponents/AdminMode'
import { NavLink } from 'react-router-dom'
import Search from './Search'
import { AddIcon } from '@chakra-ui/icons'
import { logout } from '../stateManagement/userState'
import User from '../models/user'
import { AiOutlineLogout } from 'react-icons/ai'
import {useHookstate} from "@hookstate/core";
import {searchCompletedState} from "../stateManagement/loadingState";
import {gameDashboardState} from "../stateManagement/gameState";
import ResetFilterButton from "./helperComponents/ResetFilterButton";

interface Props {
  mobileIsOpen: boolean
  mobileOnClose: () => void
  btnRef: MutableRefObject<null>
  bgLink: "gray.200" | "gray.700"
  user: User
  colorMode: ColorMode
  toggleColorMode: () => void
}

function MobileBar({ mobileIsOpen, mobileOnClose, btnRef, bgLink, user }: Props) {
  const searchCompleted = useHookstate(searchCompletedState)
  const gamesState = useHookstate(gameDashboardState)
  const games = gamesState.get()
  return (
    <Drawer
      isOpen={mobileIsOpen}
      placement="right"
      onClose={mobileOnClose}
      finalFocusRef={btnRef}
    >
      <DrawerOverlay/>
      <DrawerContent>
        <DrawerCloseButton/>
        <DrawerHeader>
          <Image maxW="15rem" src="/assets/Logo.svg" alt="Games Database Logo"/>
        </DrawerHeader>

        <DrawerBody>
          <AdminMode />
          <Stack
            as={'nav'}
            spacing={4}
          >
            <Link
              px={2}
              py={1}
              rounded={'md'}
              _hover={{
                textDecoration: 'none',
                bg: bgLink,
              }}
              as={NavLink}
              to="/games">
              <Text align={'right'}>Games</Text>
            </Link>
            <Link
              px={2}
              py={1}
              rounded={'md'}
              _hover={{
                textDecoration: 'none',
                bg: bgLink,
              }}
              as={NavLink}
              to="/games/create">
              <Text align={'right'}>Create Game</Text>
            </Link>
            <Divider/>
            <Search/>
            {searchCompleted.get() && <Text>Games Found: {games.count.totalGames}</Text>}
            <Divider/>
            <Center><Avatar mr={'2'} size={'sm'} src={user.avatar}/><Text mt={1}>{user.displayName}</Text></Center>
            <Link
              px={2}
              py={1}
              rounded={'md'}
              _hover={{
                textDecoration: 'none',
                bg: bgLink,
              }}
              as={NavLink}
              to="/profile">
              <Text align={'right'}>Preferences</Text>
            </Link>
            <Divider/>
            {/*<Button onMouseDown={toggleColorMode} ml={'auto'}>*/}
            {/*  {colorMode === 'light' ? <MoonIcon/> : <SunIcon/>}*/}
            {/*  {colorMode === 'light' ?*/}
            {/*    <Text mt={'1'} ml={'2'}>Dark</Text> :*/}
            {/*    <Text mt={'1'} ml={'2'}>Light</Text>}*/}
            {/*</Button>*/}
            {/*<Divider/>*/}
            <ResetFilterButton />
          </Stack>


        </DrawerBody>

        <DrawerFooter>
          <Button
            variant={'solid'}
            colorScheme={'blue'}
            size={'md'}
            leftIcon={<AddIcon/>}
            as={NavLink}
            mr={3}
            to="/games/create">
            <Text mt="1">Create Game</Text>
          </Button>
          <Button onMouseDown={() => logout()}><Icon as={AiOutlineLogout} mr={'2'}/> <Text
            mt={'1'}>Logout</Text></Button>

        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  )
}

export default MobileBar