import { createSelector } from '@reduxjs/toolkit'
import { isUnreadMessage } from 'domains/store/slice'
import { selectEvents } from 'ui/hooks/seamly-state-hooks'
import { readStates } from 'ui/utils/seamly-utils'
import { MessageEvent } from './store.types'
import { RootState } from '.'

export const selectUnreadEvents = createSelector(selectEvents, (events) => {
  return events.filter((event) => {
    return (
      isUnreadMessage(event) &&
      event.type !== 'service_data' &&
      event.payload?.messageStatus === readStates.received
    )
  })
})

export const selectLastUnreadEvent = createSelector(
  [selectUnreadEvents],
  (events) => {
    const nonParticipantEvents = events.filter(
      (event) => event.type !== 'participant',
    ) as MessageEvent[]
    return nonParticipantEvents.at(-1)
  },
)

export const selectUnreadEventIds = createSelector(
  selectUnreadEvents,
  (events) =>
    events
      .filter(({ payload }) => payload?.id)
      .map(({ payload }) => payload.id),
)

export const selectShowNotifications = createSelector(
  ({ state }: RootState) => state.options.features?.webNotifications,
  (webNotifications) => webNotifications?.enabled,
)