import React, {memo} from 'react';
import {StyleSheet, View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {
  IconMessageCircle,
  IconPin,
  IconPinnedOff,
} from '@tabler/icons-react-native';
import {Pressable} from 'react-native-gesture-handler';
import IconMessageUnread from '@assets/chats/message-unread.svg';
import {Typography} from '@components';
import {CONVERSATION_ITEM_HEIGHT} from '@modules/chats/constants';
import {useTheme} from '@shared/theme';

interface Props {
  onPinPress?: () => void;
  isPinned?: boolean;
  onMarkAsUnreadPress?: () => void;
  isMarkedUnread?: boolean;
}

export const CONTAINER_WIDTH = 72;
export const LEFT_ACTION_WIDTH = CONTAINER_WIDTH * 2;

/**
 * Use Pressable from react-native-gesture-handler to fix a gesture conflict with RNSwipeable
 */
function LeftActionsComponent({
  onPinPress,
  isPinned,
  onMarkAsUnreadPress,
  isMarkedUnread,
}: Props) {
  const {t} = useTranslation();
  const {theme, iconSizes} = useTheme();
  const IconPinned = isPinned ? IconPinnedOff : IconPin;
  const IconMarkAsUnread = isMarkedUnread
    ? IconMessageUnread
    : IconMessageCircle;

  return (
    <View style={styles.container}>
      <Pressable
        onPress={onMarkAsUnreadPress}
        style={[styles.content, {backgroundColor: theme.brand[500]}]}>
        <IconMarkAsUnread
          size={iconSizes.x6}
          color={theme.text.neutral.inverted}
        />
        <Typography variant="xxxs" color={theme.text.neutral.inverted}>
          {isMarkedUnread ? t('chat.mark.read') : t('chat.mark.unread')}
        </Typography>
      </Pressable>
      <Pressable
        onPress={onPinPress}
        style={[
          styles.content,
          {backgroundColor: theme.background.layout.brand},
        ]}>
        <IconPinned size={iconSizes.x6} color={theme.text.neutral.brand} />
        <Typography variant="xxxs" color={theme.text.neutral.brand}>
          {isPinned ? t('chat.pin.unpin') : t('chat.pin.pin')}
        </Typography>
      </Pressable>
    </View>
  );
}

export const LeftActions = memo(LeftActionsComponent);

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