import React, { useEffect, useMemo } from 'react';
import { ScrollView, StyleSheet, ViewStyle } from 'react-native';
import { IReactionEmoji } from '@livelike/javascript';
import { ComponentStyleProp, LLComponentStyleFn } from '../../types';
import { useStyles, useReactionPacks } from '../../hooks';
import {
  LLReactionPickerItem,
  LLReactionPickerItemProps,
} from './LLReactionPickerItem';

export type LLReactionPickerStyles = {
  pickerContainer: ViewStyle;
};

export type LLReactionPickerProps =
  ComponentStyleProp<LLReactionPickerStyles> & {
    visible?: boolean;
    reactionSpaceId?: string;
    onPress: (reactionId: string) => void;
    ReactionItemComponentStyles?: LLReactionPickerItemProps['styles'];
    ReactionItemComponent?: typeof LLReactionPickerItem;
    onReactionPanelOpen?: () => void;
    onReactionPanelClose?: () => void;
  };
/**
 * @description Provides stock UI for the Reaction picker component.
 * @param {Function} onPanelOpen - A callback function to be called when the panel opens. It is used for tracking analytics events when the component becomes visible.
 * @param {Function} onPanelClose - A callback function to be called when the panel closes. It is used for tracking analytics events when the component is unmounted as it becomes invisible.
 * @returns {JSX.Element} - Stock UI for the Reaction picker.
 */
export function LLReactionPicker({
  visible,
  styles: stylesProp,
  reactionSpaceId,
  onPress,
  ReactionItemComponentStyles,
  ReactionItemComponent = LLReactionPickerItem,
  onReactionPanelOpen,
  onReactionPanelClose,
}: LLReactionPickerProps) {
  const { reactionPacks } = useReactionPacks({
    reactionSpaceId,
  });
  const reactionPickerStyles = useStyles({
    componentStylesFn: getReactionPickerStyles,
    stylesProp,
  });

  useEffect(() => {
    onReactionPanelOpen?.();
    return () => {
      onReactionPanelClose?.();
    };
  }, []);

  const reactions = useMemo(() => {
    if (!reactionPacks.length) {
      return [];
    }
    return reactionPacks.reduce((allReactions, reactionPack) => {
      return [...allReactions, ...reactionPack.emojis];
    }, []);
  }, [reactionPacks]);

  if (!visible || !reactionPacks.length || !reactionSpaceId) {
    return null;
  }

  return (
    <ScrollView
      horizontal={true}
      keyboardShouldPersistTaps={'always'}
      style={reactionPickerStyles.pickerContainer}
    >
      {reactions.map((reaction: IReactionEmoji) => (
        <ReactionItemComponent
          key={reaction.id}
          reaction={reaction}
          styles={ReactionItemComponentStyles}
          onPress={onPress}
        />
      ))}
    </ScrollView>
  );
}

const getReactionPickerStyles: LLComponentStyleFn<LLReactionPickerStyles> = ({
  theme,
}) =>
  StyleSheet.create({
    pickerContainer: {
      position: 'absolute',
      bottom: -17,
      right: -5,
      flexDirection: 'row',
      borderRadius: 10,
      backgroundColor: theme.popoverBackground,
      maxWidth: 200,
      minWidth: 80,
    },
  });