import React from 'react';
import { Platform, StyleSheet, View } from 'react-native';
import EmojiSelector from 'react-native-emoji-selector';
import ActionSheet from 'react-native-actions-sheet';

interface EmojiSelectorModalProps {
  visible: boolean;
  addReaction: (messageId: number, emoji: string) => void;
  selectedMessage: any;
  closeEmojiSelector: () => void;
}

const EmojiSelectorModal: React.FC<EmojiSelectorModalProps> = ({
  addReaction,
  selectedMessage,
  closeEmojiSelector
}) => (
  <ActionSheet
    id="emoji-selector"
    closeOnPressBack={true}
    gestureEnabled={Platform.OS === 'ios'}
    containerStyle={{
      borderTopLeftRadius: 15,
      borderTopRightRadius: 15,
      height: '60%',
      padding: 10
    }}
    defaultOverlayOpacity={0.5}
  >
    <View style={{ height: '100%', width: '100%', paddingTop: 8 }}>
      {/* <View style={{ alignItems: 'flex-end' }}>
        <TouchableOpacity style={{}} onPress={closeEmojiSelector}>
          <MaterialCommunityIcons name="close" size={28} color={Colors.LIGHT_GRAY} />
        </TouchableOpacity>
      </View> */}
      <EmojiSelector
        onEmojiSelected={(emoji) => {
          addReaction(selectedMessage?.currentMessage?._id, emoji);
          closeEmojiSelector();
        }}
        showSearchBar={true}
        columns={8}
      />
    </View>
  </ActionSheet>
);

const styles = StyleSheet.create({
  emojiSelectorContainer: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: '50%',
    backgroundColor: 'white',
    borderTopLeftRadius: 15,
    borderTopRightRadius: 15,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: -2 },
    shadowRadius: 4,
    elevation: 5,
    padding: 10
  },
  closeModalButton: {
    position: 'absolute',
    top: 10,
    right: 10
  }
});

export default EmojiSelectorModal;
