Notes

import tw from 'twin.macro'
import { IoIosNotifications } from 'react-icons/io'
import { Popover } from '@headlessui/react'
import { BiTrashAlt } from 'react-icons/bi'
import { BsArrowBarDown } from 'react-icons/bs'
import { HeaderMenu } from './HeaderMenu'
import { MenuTransition } from '../../common/components/MenuTransition'
import { Circle } from '../../common/components/Circle'
import { Button } from '../../common/components/Button'
import { api } from '../../common/api'
import { useQuery } from '@tanstack/react-query'
import { useState } from 'react'
import styled from '@emotion/styled'

interface NotificationData {
id: number
userId: number
category: string
title: string
text: string
isDismissed: boolean
createdAt: string
updatedAt: string
}

function dismiss(id: number) {
// api.delete(`/user/notifications/${id}`).catch(() => {})
}

function dismissAll() {
// api.delete(`/user/notifications`).catch(() => {})
}

export const Notifications = () => {
const { data: notificationReq } = useQuery(['user/notifications'], async () => {
const response = await api.get<NotificationData[]>('/user/notifications')
return response
})

const [dismissedIds, setDismissedIds] = useState<number[]>([])

const notifi = notificationReq?.data?.filter(x => !dismissedIds.includes(x.id))

const handleClearAll = () => {
notificationReq?.data?.forEach(notification => {
setDismissedIds(prev => [...prev, notification.id])
})
dismissAll()
}

return (
<Popover tw="relative">
<Popover.Button as={Button} size="square" color="secondary" tw="select-none outline-none">
<IoIosNotifications />
<Circle tw="absolute -top-0.5 -right-0.5" size={2} />
</Popover.Button>

<MenuTransition>
<Popover.Panel
as={HeaderMenu}
tw="absolute right-0 w-96 top-13 p-2 select-none overflow-hidden overflow-y-auto"
>
<div tw="flex justify-end items-center mb-2">
<div tw="text-sm hover:text-red-400 cursor-pointer" onClick={handleClearAll}>
Clear All
</div>
</div>
{notifi !== undefined && notifi.length > 0 ? (
<div tw="flex flex-col gap-2">
{notifi?.map(notifyData => (
<Notification
key={notifyData.id}
notifyData={notifyData}
onDismiss={() => {
setDismissedIds(prev => [...prev, notifyData.id])
dismiss(notifyData.id)
}}
/>
))}
</div>
) : (
<div tw="flex justify-center items-center h-12 text-gray-100">
You dont have any new notifications
</div>
)}
</Popover.Panel>
</MenuTransition>
</Popover>
)
}

const Notification = ({
notifyData,
onDismiss,
}: {
notifyData: NotificationData
onDismiss: () => void
}) => {
const [dismissed, setDismissed] = useState(false)

const handleDismiss = () => {
setDismissed(true)
setTimeout(() => {
onDismiss()
}, 300)
}

const StyledSpan = styled.span`
a {
${tw`text-primary-500`}
}
`

return (
<div
tw="p-4 bg-gray-500 rounded flex gap-4 items-center"
css={[
tw`transition-all duration-300`,
dismissed ? tw`opacity-0 translate-x-56` : tw`opacity-100`,
]}
>
<div tw="h-10 w-10 rounded-full bg-gray-300/75 shrink-0 flex items-center justify-center">
<BsArrowBarDown />
</div>
<div>
<div tw="flex w-full items-center justify-between">
<div tw="text-white">{notifyData.title}</div>
<div
tw="text-sm cursor-pointer hover:text-red-400 transition-all duration-100"
onClick={handleDismiss}
>
<BiTrashAlt />
</div>
</div>
<StyledSpan tw="text-sm" dangerouslySetInnerHTML={{ __html: notifyData.text }} />
</div>
</div>
)
}