"use client"
import { useHookstate } from '@hookstate/core';
import { Box, Button, Center, Flex, Image, rem, SimpleGrid, Text, Transition } from '@mantine/core';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import { IoCloseOutline } from 'react-icons/io5';
import { TEMA } from '../bin/val_global';

export default function NotificationCustomeCenter({ title, desc, onClick }: { title: string, desc: string, onClick: (val: string) => void, }) {
   const [opened, setOpened] = useState(false)
   const tema = useHookstate(TEMA)

   useShallowEffect(() => {
      const timer = setTimeout(() => {
         setOpened(true);
      }, 50);
      return () => clearTimeout(timer);
   }, []);

   function reloadData() {
      setOpened(false)
   }
   return (
      <>
         <Center>
            <Transition
               mounted={opened}
               transition="fade-down"
               duration={400}
               timingFunction="ease"
            >
               {(state) => (
                  <div
                     style={{
                        ...state,
                        zIndex: 999,
                        position: 'fixed',
                        flex: 1,
                        display: 'flex',
                        margin: 0,
                        justifyContent: 'center',
                        alignItems: 'center',
                        top: '30%'
                     }}
                  >
                     <Box p={rem(15)} w={"90%"} style={{
                        maxWidth: rem(450),
                        zIndex: 999,
                        backgroundColor: "#ffffff",
                        borderRadius: 15,
                        border: `1px solid ${tema.get().bgTotalKegiatan}`
                     }}>
                        <Flex justify={'flex-end'} align={"center"}>
                           <IoCloseOutline onClick={reloadData} size={25} />
                        </Flex>
                        <Flex
                           mih={50}
                           gap="xs"
                           justify="center"
                           align="center"
                           direction="column"
                           wrap="wrap"
                        >
                           <Image
                              style={{
                                 maxWidth: '30%',
                                 maxHeight: '30%',
                              }}
                              fit="contain"
                              alt={'pengumuman'}
                              src={"/assets/img/announcement.jpg"}
                           />
                           <Text size="xl" fw={500} ta="center">PENGUMUMAN</Text>
                           <Text size="sm" ta="center">{desc}</Text>
                           <SimpleGrid
                              cols={{ base: 1, sm: 2, lg: 2 }}
                              spacing="xs"
                              w={'90%'}>
                              {/* {
                                 isMobile
                                    ? <></>
                                    :
                                    <> */}
                              <Button
                                 fullWidth
                                 radius="md"
                                 onClick={() => {
                                    setOpened(false)
                                    onClick('check')
                                 }}
                              >
                                 Periksa Detail
                              </Button>
                              <Button
                                 fullWidth
                                 radius="md"
                                 onClick={() => {
                                    setOpened(false)
                                    onClick('read')
                                 }}
                              >
                                 Tandai Telah Dibaca
                              </Button>
                              {/* </>
                              } */}
                           </SimpleGrid>
                        </Flex>
                     </Box>
                  </div>
               )}
            </Transition>
         </Center >
      </>
   );
}
