import React, {memo} from 'react';
import {StyleSheet, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconDots} from '@tabler/icons-react-native';
import {Pressable} from 'react-native-gesture-handler';
import {Typography} from '@components';
import {CONVERSATION_ITEM_HEIGHT} from '@modules/chats/constants';
import {useTheme} from '@shared/theme';

interface Props {
  onMorePress?: () => void;
}

export const RIGHT_ACTION_WIDTH = 72;

/**
 * Use Pressable from react-native-gesture-handler to fix a gesture conflict with RNSwipeable
 */
function RightActionsComponent({onMorePress}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();

  return (
    <View style={styles.container}>
      <Pressable
        onPress={onMorePress}
        style={[
          styles.content,
          {backgroundColor: theme.background.layout.brand},
        ]}>
        <IconDots size={iconSizes.x6} color={theme.text.neutral.brand} />
        <Typography variant="xxxs" color={theme.text.neutral.brand}>
          {t('general.options')}
        </Typography>
      </Pressable>
    </View>
  );
}

export const RightActions = memo(RightActionsComponent);

const styles = StyleSheet.create({
  container: {
    height: CONVERSATION_ITEM_HEIGHT + 1,
    width: RIGHT_ACTION_WIDTH,
    justifyContent: 'space-between',
  },
  content: {
    width: RIGHT_ACTION_WIDTH,
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
