import React from 'react';

import type { HomeCanvas as HomeCanvasState } from '../../../lib/copilot/use-home-canvas';
import type {
  ArticleSummary,
  ScanHistoryPoint,
  WeeklyReportResponse,
} from '../../../service/visibility/visibility.interface';

import { CatalogPanel } from './CatalogPanel';
import { ContentPanel } from './ContentPanel';
import { HomeCanvas } from './HomeCanvas';
import { TemplatesPanel } from './TemplatesPanel';
import { WeekPanel } from './WeekPanel';

/**
 * Whichever canvas the address opened beside the conversation, if any. One
 * place decides what each view is, so the thread, a link in a reply and a
 * bookmarked address all open the same thing.
 *
 * @param props - Component props.
 * @param props.canvas - What is open, and how to close it.
 * @param props.report - The week, for the visibility canvas.
 * @param props.scans - The scan history behind it, newest first.
 * @param props.articles - The brand's content, for the content canvas.
 * @param props.onAsk - Put a question to the copilot.
 * @param props.onOpenArticle - Open one piece of content.
 * @param props.className - Where the canvas sits in the row.
 * @param props.shellClassName - How tall it is.
 * @return The canvas, or nothing when none is open.
 */
export function HomeCanvases({
  canvas,
  report,
  scans,
  articles,
  onAsk,
  onOpenArticle,
  className,
  shellClassName,
}: {
  canvas: HomeCanvasState;
  report: WeeklyReportResponse | null;
  scans: ScanHistoryPoint[];
  articles: ArticleSummary[];
  onAsk: (prompt: string) => void;
  onOpenArticle: (articleId: string) => void;
  className: string;
  shellClassName: string;
}): React.ReactElement | null {
  if (canvas.view === 'week') {
    return (
      <HomeCanvas
        title="This week"
        fullPageTo="#/ai-visibility"
        onClose={canvas.close}
        className={className}
        shellClassName={shellClassName}
      >
        <WeekPanel report={report} scans={scans} onAsk={onAsk} />
      </HomeCanvas>
    );
  }

  if (canvas.view === 'catalog') {
    return (
      <HomeCanvas
        title="Catalog"
        fullPageTo="#/catalog-quality"
        onClose={canvas.close}
        className={className}
        shellClassName={shellClassName}
        bodyClassName=""
      >
        <CatalogPanel onAsk={onAsk} />
      </HomeCanvas>
    );
  }

  if (canvas.view === 'content') {
    return (
      <HomeCanvas
        title="Content"
        fullPageTo="#/ai-visibility/contents"
        onClose={canvas.close}
        className={className}
        shellClassName={shellClassName}
        bodyClassName=""
      >
        <ContentPanel
          articles={articles}
          onAsk={onAsk}
          onOpen={onOpenArticle}
        />
      </HomeCanvas>
    );
  }

  if (canvas.view === 'templates') {
    return (
      <HomeCanvas
        title="Templates"
        fullPageTo="#/ai-visibility/page-templates"
        onClose={canvas.close}
        className={className}
        shellClassName={shellClassName}
        bodyClassName=""
      >
        <TemplatesPanel onAsk={onAsk} />
      </HomeCanvas>
    );
  }

  return null;
}