import React, {FC, memo, useCallback} from 'react';
import {StyleProp, View, ViewStyle} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconProps} from '@tabler/icons-react-native';
import * as Haptics from 'expo-haptics';
import {EaseView} from 'react-native-ease';
import {Pressable, Typography} from '@components';
import {SpringTransitionConfig} from '@modules/chats/constants';
import {useTheme} from '@shared/theme';
import {commonStyles} from '@shared/styles';
import {isIos} from '@shared/utils';

import {styles} from './styles';

export interface ContextMenuOption {
  label: string;
  Icon: FC<IconProps>;
  iconContainerStyle?: StyleProp<ViewStyle>;
  isDanger?: boolean;
  onPress: () => void;
}
interface Props {
  options: ContextMenuOption[];
  style?: StyleProp<ViewStyle>;
  isLeft: boolean;
}

const ContextMenuComponent = ({options, style, isLeft}: Props) => {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  const handlePress = useCallback(
    (onPress: () => void) => () => {
      Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      onPress();
    },
    [],
  );

  return (
    <EaseView
      transformOrigin={{
        x: isLeft ? 0 : 1,
        y: 0,
      }}
      initialAnimate={{
        scale: 0.3,
        opacity: 0,
      }}
      animate={{
        scale: 1,
        opacity: 1,
      }}
      transition={SpringTransitionConfig}
      accessible={false}
      accessibilityRole="menu"
      accessibilityLabel={t('chat.message_context_menu')}
      style={[
        styles.menu,
        isIos
          ? commonStyles.shadow
          : {...styles.menuBorder, borderColor: theme.border.neutral.default},
        style,
      ]}>
      {options.map(
        (
          {label, Icon, onPress, isDanger = false, iconContainerStyle},
          index,
        ) => {
          const color = isDanger
            ? theme.button.background.error.default
            : theme.text.neutral.default;
          return (
            <View key={label}>
              <Pressable
                accessibilityRole="button"
                accessibilityLabel={label}
                enableHaptics
                underlayColor={theme.background.layout.default}
                style={styles.menuItem}
                onPress={handlePress(onPress)}>
                <Typography variant="s" weight="semiBold" color={color}>
                  {label}
                </Typography>
                {iconContainerStyle ? (
                  <View style={iconContainerStyle}>
                    <Icon size={iconSizes.x6} color={color} />
                  </View>
                ) : (
                  <Icon size={iconSizes.x6} color={color} />
                )}
              </Pressable>
              {index < options.length - 1 && (
                <View
                  style={{
                    ...styles.itemSeparator,
                    borderColor: theme.border.neutral.default,
                  }}
                />
              )}
            </View>
          );
        },
      )}
    </EaseView>
  );
};

export const ContextMenu = memo(ContextMenuComponent);
