import React, { useState } from 'react';
import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';

import type { BaseMessage } from '@sendbird/chat/message';
import { Image, Modal, ModalSafeArea, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
import { Logger } from '@sendbird/uikit-utils';
import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';

import { UNKNOWN_USER_ID } from '../../constants';
import type { ReactionBottomSheetProps } from './index';

const ReactionEmojiPressable = ({
  emojiKey,
  url,
  message,
  channel,
  currentUserId,
  selectedBackground,
  enabledBackground,
  onClose,
}: {
  emojiKey: string;
  url: string;
  message: SendbirdBaseMessage | undefined;
  channel: SendbirdBaseChannel | undefined;
  currentUserId: string | undefined;
  selectedBackground: string;
  enabledBackground: string;
  onClose: () => Promise<void>;
}) => {
  const [pressed, setPressed] = useState(false);

  const reactedUserIds = message?.reactions?.find((it) => it.key === emojiKey)?.userIds ?? [];
  const idx = reactedUserIds.indexOf(currentUserId ?? UNKNOWN_USER_ID);
  const reacted = idx > -1;

  return (
    <Pressable
      onPress={async () => {
        if (message && channel) {
          const action = (msg: BaseMessage, key: string) => {
            return reacted ? channel.deleteReaction(msg, key) : channel.addReaction(msg, key);
          };

          action(message, emojiKey).catch((error) => {
            const operation = reacted ? 'remove' : 'add';
            Logger.warn(`Failed to ${operation} reaction (emojiKey=${emojiKey})`, error);
          });
        }
        await onClose();
      }}
      onPressIn={() => setPressed(true)}
      onPressOut={() => setPressed(false)}
      style={[styles.button, { backgroundColor: reacted || pressed ? selectedBackground : enabledBackground }]}
    >
      <Image source={{ uri: url }} style={styles.emoji} />
    </Pressable>
  );
};

const NUM_COLUMN = 6;
const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {
  const { width } = useWindowDimensions();
  const { colors } = useUIKitTheme();

  const { currentUser, emojiManager } = chatCtx;
  const { channel, message } = reactionCtx;
  const color = colors.ui.reaction.default;

  return (
    <Modal
      type={'slide'}
      visible={Boolean(visible && channel && message)}
      onClose={onClose}
      onDismiss={onDismiss}
      backgroundStyle={styles.modal}
    >
      <ModalSafeArea>
        {(safeArea) => (
          <View
            style={[
              styles.container,
              {
                width,
                paddingBottom: safeArea.paddingBottom,
                backgroundColor: colors.ui.dialog.default.none.background,
                paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,
                paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,
              },
            ]}
          >
            <FlatList
              data={emojiManager.allEmoji}
              numColumns={NUM_COLUMN}
              keyExtractor={(item) => item.key}
              contentContainerStyle={styles.flatlist}
              ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
              renderItem={({ item: { key, url } }) => {
                return (
                  <View style={styles.emojiItem}>
                    <ReactionEmojiPressable
                      emojiKey={key}
                      url={url}
                      message={message}
                      channel={channel}
                      currentUserId={currentUser?.userId}
                      selectedBackground={color.selected.background}
                      enabledBackground={color.enabled.background}
                      onClose={onClose}
                    />
                  </View>
                );
              }}
            />
          </View>
        )}
      </ModalSafeArea>
    </Modal>
  );
};

const styles = createStyleSheet({
  container: {
    overflow: 'hidden',
    borderTopStartRadius: 8,
    borderTopEndRadius: 8,
    paddingTop: 16,
    paddingHorizontal: 18,
    flexDirection: 'row',
  },
  modal: {
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  flatlist: {
    width: '100%',
    flexDirection: 'column',
    justifyContent: 'space-between',
  },
  emojiItem: {
    width: `${100 / NUM_COLUMN}%`,
    alignItems: 'center',
  },
  button: {
    width: 44,
    height: 44,
    padding: 4,
    borderRadius: 8,
  },
  emoji: {
    width: '100%',
    height: '100%',
  },
});

export default ReactionListBottomSheet;