import { useCallback, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { usePostViewer } from './usePostViewer';
import { useNavigationMemory } from './useNavigationMemory';
import { usePostLabels } from '../settings/usePostLabels';
import PostThreadInline from './PostThreadInline';
import './PostViewerSide.css';

export default function PostViewerSide() {
  const { activePostUri, mode, close } = usePostViewer();
  const navigate = useNavigate();
  const { mainContentPath } = useNavigationMemory();
  const { t: label } = usePostLabels();

  const mainContentPathRef = useRef(mainContentPath);
  mainContentPathRef.current = mainContentPath;

  const isOpen = activePostUri !== null && mode === 'side';

  const handleClose = useCallback(() => {
    navigate(mainContentPathRef.current, { replace: true });
    close();
  }, [navigate, close]);

  if (!isOpen) return null;

  return (
    <div className="post-side-panel open">
      <div className="post-side-header">
        <span className="post-side-title">{label('post', false, true)}</span>
        <button className="post-side-close" onClick={handleClose}>
          ✕
        </button>
      </div>
      <div className="post-side-body">
        <PostThreadInline key={activePostUri} uri={activePostUri!} />
      </div>
    </div>
  );
}