import { EmojiKeyboard, emojisByCategory, type EmojiType } from '@planningcenter/emoji-keyboard'
import React, { useCallback } from 'react'
import { StyleSheet, View } from 'react-native'
import { useTheme } from '../../hooks'

const BLOCKED_EMOJIS = new Set(['🖕'])

const filteredEmojis = emojisByCategory.map(category => ({
  ...category,
  data: category.data.filter(e => !BLOCKED_EMOJIS.has(e.emoji)),
}))

interface EmojiTabProps {
  onEmojiSelect: (emoji: string) => void
}

export function EmojiTab({ onEmojiSelect }: EmojiTabProps) {
  const styles = useStyles()
  const { colors } = useTheme()

  const handleEmojiSelected = useCallback(
    (emojiObject: EmojiType) => {
      onEmojiSelect(emojiObject.emoji)
    },
    [onEmojiSelect]
  )

  const emojiTheme = {
    container: colors.fillColorNeutral100Inverted,
    header: colors.textColorDefaultSecondary,
    knob: colors.fillColorNeutral040,
    skinTonesContainer: colors.fillColorNeutral060,
    category: {
      icon: colors.textColorDefaultSecondary,
      iconActive: colors.interaction,
      container: colors.fillColorNeutral100Inverted,
      containerActive: colors.fillColorNeutral080,
    },
    search: {
      background: colors.fillColorNeutral080,
      text: colors.textColorDefaultPrimary,
      placeholder: colors.textColorDefaultSecondary,
      icon: colors.textColorDefaultSecondary,
    },
    emoji: {
      selected: colors.fillColorNeutral080,
    },
  }

  return (
    <View style={styles.container}>
      <EmojiKeyboard
        categoryPosition="top"
        emojisByCategory={filteredEmojis}
        onEmojiSelected={handleEmojiSelected}
        hideHeader
        enableSearchBar
        enableRecentlyUsed
        theme={emojiTheme}
        styles={{
          container: { borderRadius: 0 },
          category: {
            container: {
              borderRadius: 0,
              marginTop: -6,
              borderBottomWidth: 1,
              borderBottomColor: colors.borderColorDefaultDim,
            },
          },
        }}
      />
    </View>
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.fillColorNeutral100Inverted,
    },
  })
}