import React, {useEffect, useState} from 'react';
import {Navigation} from '@interfaces/navigation';
import {UserPermissions} from '@interfaces/user';
import {
  addKeyUpdateToList,
  removeKeyUpdateFromList,
} from '@modules/keyUpdates/utils';
import {markKeyUpdateAsRead} from '@modules/keyUpdates/service';
import PostDetailScreen from '@modules/post/screens/PostDetail/component/PostDetailScreen';
import GroupPostDetailScreen from '@modules/group/screens/GroupPostDetail/components/GroupPostDetailScreen';
import {usePermission} from '@redux/selectors';
import {Screens} from '@shared/constants';

import KeyUpdateOptionsDialog from './component/KeyUpdateOptionsDialog';

function KeyUpdatePostDetail(props: Navigation<Screens.KEY_UPDATE_DETAILS>) {
  const {post, unreads} = props.route.params;
  const postId = post?.id;
  const [optionsOpen, setOptionsOpen] = useState(false);

  useEffect(() => {
    if (unreads) {
      removeKeyUpdateFromList(post.id, unreads);
      addKeyUpdateToList(post, false);
      markKeyUpdateAsRead(post.id);
    }
  }, [post, unreads]);

  const canCreateKeyUpdates = usePermission(UserPermissions.CREATE_KEY_UPDATES);
  const onOptionsClose = () => setOptionsOpen(false);
  const onOptionsPress = () => setOptionsOpen(true);

  return (
    <>
      {post.groupId ? (
        <GroupPostDetailScreen
          onOptionsPress={onOptionsPress}
          withOptions={canCreateKeyUpdates}
          id={postId}
          groupId={post.groupId}
        />
      ) : (
        <PostDetailScreen
          withOptions={canCreateKeyUpdates}
          onOptionsPress={onOptionsPress}
          id={postId}
        />
      )}
      <KeyUpdateOptionsDialog
        open={optionsOpen}
        post={post}
        unreads={unreads}
        onClose={onOptionsClose}
        goBackOnDelete
      />
    </>
  );
}

export default KeyUpdatePostDetail;