import { useContext, useState } from 'react'
import { Typography, Button, Empty, Spin, Flex, Dropdown } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'
import PropTypes from 'prop-types'
import { NotificationContext } from '../context/NotificationContext'
import Notification from './Notification'
import ScrollBox from './ScrollBox'
import CheckIcon from '../../Icons/CheckIcon'
import BinIcon from '../../Icons/BinIcon'

const { Text } = Typography

const NotificationCenter = ({ visible }) => {
  const {
    notifications,
    markNotificationAsRead,
    markAllNotificationsAsRead,
    deleteNotification,
    deleteAllNotifications,
    notificationsLoading
  } = useContext(NotificationContext)

  const unreadCount = notifications.filter((n) => !n.read).length

  const [clearNotificationsLoading, setClearNotificationsLoading] =
    useState(false)

  const handleMarkAsRead = async (notificationId) => {
    await markNotificationAsRead(notificationId)
  }

  const handleMarkAllAsRead = async () => {
    await markAllNotificationsAsRead()
  }

  const actionItems = {
    items: [
      {
        label: 'Mark All Read',
        key: 'markAllRead',
        icon: <CheckIcon />,
        disabled: unreadCount === 0
      },
      { type: 'divider' },
      {
        label: 'Clear All',
        key: 'clearAll',
        icon: <BinIcon />,
        danger: true,

        disabled: notifications.length === 0
      }
    ],
    onClick: ({ key }) => {
      if (key === 'markAllRead') {
        handleMarkAllAsRead()
      } else if (key === 'clearAll') {
        setClearNotificationsLoading(true)
        deleteAllNotifications().finally(() =>
          setClearNotificationsLoading(false)
        )
      }
    }
  }

  if (!visible) {
    return null
  }

  return (
    <Flex vertical style={{ height: '100%' }}>
      <Flex justify='space-between' align='center' style={{ marginBottom: 16 }}>
        <Dropdown menu={actionItems}>
          <Button loading={clearNotificationsLoading}>Actions</Button>
        </Dropdown>
      </Flex>

      <ScrollBox>
        {notificationsLoading ? (
          <Flex
            justify='center'
            align='center'
            style={{ padding: '40px' }}
            gap='small'
          >
            <Spin indicator={<LoadingOutlined />} />
            <Text type='secondary'>Loading notifications...</Text>
          </Flex>
        ) : notifications.length === 0 ? (
          <Flex justify='center' align='center' style={{ padding: '40px' }}>
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description='No notifications'
            />
          </Flex>
        ) : (
          <Flex vertical gap='small'>
            {notifications.map((notification) => (
              <Notification
                inlineIcon={true}
                showDetails={true}
                key={notification._id}
                notification={notification}
                onMarkAsRead={handleMarkAsRead}
                onDelete={deleteNotification}
              />
            ))}
          </Flex>
        )}
      </ScrollBox>
    </Flex>
  )
}

NotificationCenter.propTypes = {
  visible: PropTypes.bool.isRequired
}

export default NotificationCenter
