'use client'
import { useHookstate } from "@hookstate/core";
import { Box, Button, Divider, Group, rem, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { FaCheck } from "react-icons/fa6";
import { TEMA } from "../bin/val_global";
import LayoutNavbarNew from "../layout/layout_navbar_new";

export default function ViewFilterData({ linkFilter }: { linkFilter: string }) {
   const [selectedFilter, setSelectedFilter] = useState<any>('');
   const data = [
      {
         id: 1,
         data: "data-saya",
         name: "Kegiatan Saya",
      },
      {
         id: 2,
         data: "semua",
         name: "Semua Kegiatan",
      },
   ]
   const searchParams = useSearchParams()
   const kategori = searchParams.get('cat')
   const tema = useHookstate(TEMA)



   useShallowEffect(() => {
      if (kategori == "null" || kategori == "undefined" || kategori == '') {
         setSelectedFilter("data-saya")
      } else {
         setSelectedFilter(kategori)
      }
   }, [kategori]);

   const router = useRouter()

   return (
      <Box>
         <LayoutNavbarNew back='' title='Filter' menu />
         <Box p={20}>
            {
               data.map((filter) => (
                  <Box key={filter.id}>
                     <Group
                        justify="space-between"
                        align="center"
                        mb={10}
                        onClick={() => setSelectedFilter(filter.data)}
                     >
                        <Text fw={selectedFilter === filter.data ? 'bold' : 'normal'}>
                           {filter.name}
                        </Text>
                        {selectedFilter === filter.data && <FaCheck size={25} />}
                     </Group>
                     <Divider my={"sm"} />
                  </Box>
               ))

            }
         </Box>
         <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
            maxWidth: rem(550),
            zIndex: 999,
            backgroundColor: `${tema.get().bgUtama}`,
         }}>
            <Button
               fullWidth
               radius={100}
               size="lg"
               color={tema.get().utama}
               onClick={() => {
                  router.push(`/${linkFilter}?cat=` + selectedFilter)
               }}
            >
               Terapkan
            </Button>
         </Box>
      </Box>
   );
}