import { globalRole, TEMA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { Box, Flex, SimpleGrid, Stack, Text } from "@mantine/core";
import { useRouter, useSearchParams } from "next/navigation";
import { HiOutlineFilter } from "react-icons/hi";
import { IoAddCircle } from "react-icons/io5";

export default function DrawerDiscussionGeneral() {
   const tema = useHookstate(TEMA)
   const roleLogin = useHookstate(globalRole)
   const router = useRouter()
   const searchParams = useSearchParams()
   const group = searchParams.get('group')

   return (
      <Box>
         <Stack pt={10}>
            <SimpleGrid cols={{ base: 2, sm: 2, lg: 3 }} >
               <Flex onClick={() => router.push("/discussion/create")} justify={'center'} align={'center'} direction={'column'} >
                  <Box>
                     <IoAddCircle size={30} color={tema.get().utama} />
                  </Box>
                  <Box>
                     <Text c={tema.get().utama}>Tambah Diskusi</Text>
                  </Box>
               </Flex>
               {
                  (roleLogin.get() == "supadmin" || roleLogin.get() == "developer") &&
                  <Flex onClick={() => {
                     router.push('/discussion?page=filter&group=' + group)
                  }} justify={'center'} align={'center'} direction={'column'} >
                     <Box>
                        <HiOutlineFilter size={30} color={tema.get().utama} />
                     </Box>
                     <Box>
                        <Text c={tema.get().utama}>Filter</Text>
                     </Box>
                  </Flex>
               }
            </SimpleGrid>
         </Stack>
      </Box>
   )
}