import React, {useState, useCallback, ReactElement} from 'react';
import {ListRenderItemInfo} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useDispatch} from 'react-redux';
import {Dialog, List, ListItem, Typography} from '@components';
import {Comment as CommentType} from '@interfaces/comments';
import {useActionMenu} from '@modules/acknowledgement/hooks/useActionMenu';
import {MenuItem} from '@modules/acknowledgement/interfaces';
import {useMarketplaceStore} from '@modules/marketplace/stores/useMarketplaceStore';
import {deleteCommentWithStoreUpdate} from '@modules/post/utils';
import {setCommentToEdit} from '@redux/comment/comment.actions';
import {showSnackbar} from '@redux/dispatchers';

import styles from './styles';

interface CommentProps {
  isVisible: boolean;
  isOwner?: boolean;
  onHide: (hide?: boolean) => void;
  comment: Nullable<CommentType>;
  postId?: number;
  groupId?: number;
  isMarketplace?: boolean;
  deleteParentId?: number;
}

const ContentActionsDialog = ({
  isVisible,
  isOwner = false,
  onHide,
  comment,
  postId,
  groupId,
  isMarketplace = false,
  deleteParentId,
}: CommentProps): ReactElement => {
  const [isDeleteView, setIsDeleteView] = useState(false);
  const dispatch = useDispatch();
  const {t} = useTranslation();
  const commentId = comment?.id;

  const onEdit = useCallback(() => {
    if (!comment) {
      return;
    }
    if (isMarketplace) {
      useMarketplaceStore.getState().setCommentToEdit(comment);
    } else {
      dispatch(setCommentToEdit(comment));
    }
    onHide();
  }, [comment, dispatch, isMarketplace, onHide]);

  const onChangeToDeleteView = () => {
    setIsDeleteView(true);
  };

  const {menuItems, onMenuItemPress, keyExtractor} = useActionMenu({
    isOwner,
    onEdit,
    onDelete: onChangeToDeleteView,
  });

  const onDelete = useCallback(async () => {
    if (!commentId) {
      return;
    }

    await deleteCommentWithStoreUpdate({
      commentId,
      postId,
      groupId,
      isMarketplace,
      parentId: comment?.parentId ?? deleteParentId,
    });

    showSnackbar({
      title: t('post.comment_deleted_success'),
      variant: 'success',
    });
    onHide();
  }, [
    comment?.parentId,
    commentId,
    deleteParentId,
    groupId,
    isMarketplace,
    onHide,
    postId,
    t,
  ]);

  const onClose = () => onHide();

  const deleteMessageKey = 'acknowledgements.delete_comment_message';

  const renderItem = ({
    item: {key, label, LeftIcon, hide},
  }: ListRenderItemInfo<MenuItem>) =>
    hide ? null : (
      <ListItem
        avatar={{Icon: LeftIcon}}
        title={label}
        style={styles.listItem}
        onItemPress={onMenuItemPress(key)}
      />
    );

  const onGoBack = () => {
    setIsDeleteView(false);
  };

  return (
    <Dialog
      title={isDeleteView ? t('general.delete') : t('general.options')}
      isVisible={isVisible}
      onGoBack={onGoBack}
      withBackButton={isDeleteView}
      onClose={onClose}
      footer={
        isDeleteView
          ? {
              primaryButton: {
                onPress: onDelete,
                text: t('general.delete'),
              },
            }
          : undefined
      }
      contentStyle={styles.dialog}>
      {isDeleteView ? (
        <Typography>{t(deleteMessageKey)}</Typography>
      ) : (
        <List
          keyExtractor={keyExtractor}
          data={menuItems}
          style={styles.list}
          renderItem={renderItem}
        />
      )}
    </Dialog>
  );
};

export default ContentActionsDialog;