import React from 'react';
import { useSearchParams } from 'react-router-dom';
import { useVisualSettings } from '../context/VisualSettingsContext';
import DossierBlogPostPage from './blog-views/DossierBlogPostPage';
import DokumentBlogPostPage from './blog-views/DokumentBlogPostPage';
import EditorialBlogPostPage from './blog-views/EditorialBlogPostPage';
import BrutalistBlogPostPage from './blog-views/BrutalistBlogPostPage';
import OldBlogPostPage from './blog-views/OldBlogPostPage';
import TerminalBlogPostPage from './blog-views/TerminalBlogPostPage';
import TerminalGreenBlogPostPage from './blog-views/TerminalGreenBlogPostPage';
import LuxeBlogPostPage from './blog-views/LuxeBlogPostPage';
import TerracottaBlogPostPage from './blog-views/TerracottaBlogPostPage';
import GalleyBlogPostPage from './blog-views/GalleyBlogPostPage';

const BlogPostPage = () => {
  const { blogPostViewMode, fezcodexTheme } = useVisualSettings();
  const [searchParams] = useSearchParams();

  const effectiveViewMode = (() => {
    const themeParam = searchParams.get('theme');
    if (
      themeParam &&
      [
        'brutalist',
        'editorial',
        'dossier',
        'terminal',
        'dokument',
        'terminal-green',
        'old',
        'luxe',
        'terracotta',
        'galley',
      ].includes(themeParam)
    ) {
      return themeParam;
    }

    if (blogPostViewMode !== 'standard') {
      return blogPostViewMode;
    }

    if (fezcodexTheme === 'luxe') return 'luxe';
    if (fezcodexTheme === 'terracotta') return 'terracotta';

    return 'brutalist';
  })();

  if (effectiveViewMode === 'luxe') return <LuxeBlogPostPage />;
  if (effectiveViewMode === 'terracotta') return <TerracottaBlogPostPage />;
  if (effectiveViewMode === 'galley') return <GalleyBlogPostPage />;
  if (effectiveViewMode === 'old') return <OldBlogPostPage />;
  if (effectiveViewMode === 'dossier') return <DossierBlogPostPage />;
  if (effectiveViewMode === 'dokument') return <DokumentBlogPostPage />;
  if (effectiveViewMode === 'editorial') return <EditorialBlogPostPage />;
  if (effectiveViewMode === 'terminal-green') return <TerminalGreenBlogPostPage />;
  if (effectiveViewMode === 'terminal') return <TerminalBlogPostPage />;

  return <BrutalistBlogPostPage />;
};

export default BlogPostPage;