import React, {useState} from 'react';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import {useNavigation} from '@react-navigation/native';
import {BottomModalMenu, BottomModalMenuOption} from '@components/Modals';
import {Message, MessageStatus} from '@modules/chat/interfaces';
import {setEditMessage} from '@modules/chat/redux';
import {useAppSelector} from '@redux/utils';
import {copyToClipboard} from '@shared/utils';
import {Screens} from '@shared/constants';

import {Emojis} from './components/Emojis';
import {DeleteModal} from './components/DeleteModal';

interface Props {
  chatId: number;
  isVisible: boolean;
  onClose: () => void;
  message: Nullable<Message>;
}

export function MessageActionsModal({
  chatId,
  isVisible,
  message,
  onClose,
}: Props) {
  const {t} = useTranslation();
  const navigation = useNavigation();
  const dispatch = useDispatch();
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const currentUserId = useAppSelector(({user}) => user.id);

  const options = [
    currentUserId === message?.userId &&
      message?.status !== MessageStatus.FORWARDED &&
      message?.text && {
        key: 'edit',
        leftIcon: 'edit',
        label: t('chats.edit'),
      },
    {
      key: 'forward',
      leftIcon: 'iosShare',
      label: t('chats.forward'),
    },
    message?.text && {
      key: 'copy',
      leftIcon: 'contentCopy',
      label: t('general.copy'),
    },
    currentUserId === message?.userId && {
      key: 'delete',
      leftIcon: 'delete',
      label: t('chats.delete'),
    },
  ].filter(Boolean) as BottomModalMenuOption[];

  const onOptionPress = (option: string) => {
    if (!message) {
      onClose();
      return;
    }

    switch (option) {
      case 'edit':
        dispatch(setEditMessage(message));
        onClose();
        return;
      case 'forward':
        onClose();
        navigation.navigate(Screens.CHAT_FORWARD_MESSAGE, {
          chatId,
          messageId: message.id,
        });
        return;
      case 'copy':
        onClose();
        copyToClipboard({text: message.text});
        return;
      case 'delete':
        onClose();
        setTimeout(() => {
          setShowDeleteModal(true);
        }, 500);
        return;
    }
  };

  const onCloseDeleteModal = () => {
    setShowDeleteModal(false);
  };

  return (
    <>
      <BottomModalMenu
        isVisible={isVisible}
        onClose={onClose}
        options={options}
        onOptionPress={onOptionPress}
        ListHeaderComponent={<Emojis message={message} onClose={onClose} />}
      />
      <DeleteModal
        message={message}
        showDeleteModal={showDeleteModal}
        onClose={onCloseDeleteModal}
      />
    </>
  );
}