import React, { useState, useEffect } from 'react';

import { Scrollable } from './Scrollable';
import { BackstoryPageProps } from './BackstoryTab';
import { Document } from './Document';

const AboutPage = (props: BackstoryPageProps) => {
  const { sessionId, submitQuery, setSnack, route, setRoute } = props;
  const [ page, setPage ] = useState<string>("");
  const [ subRoute, setSubRoute] = useState<string>("");

  useEffect(() => {
    console.log(`AboutPage: ${page}`);
  }, [page]);
  useEffect(() => {
    console.log(`AboutPage: ${page} - subRoute: ${subRoute}`);
  }, [subRoute]);

  useEffect(() => {
    if (route === undefined) { return; }
    const parts = route.split("/");
    if (parts.length === 0) { return; }
    setPage(parts[0]);
    if (parts.length > 1) {
      parts.shift();
      setSubRoute(parts.join("/"));
    }
  }, [route, setPage, setSubRoute]);

  const onDocumentExpand = (document: string, open: boolean) => {
    console.log("Document expanded:", document, open);
    if (open) {
      setPage(document);
    } else {
      setPage("");
    }
    /* This is just to quiet warnings for now...*/
    if (route === "never" && subRoute && setRoute) {
      setRoute(document);
      setSubRoute(document);
    }
  }

  return <Scrollable
    autoscroll={false}
    sx={{
      maxWidth: "1024px",
      height: "calc(100vh - 72px)",
      flexDirection: "column",
      margin: "0 auto",
      p: 1,
    }}
  >
    <Document {...{
      title: "About",
      filepath: "/docs/about.md",
      onExpand: (open: boolean) => { onDocumentExpand('about', open); },
      expanded: page === 'about',
      sessionId,
      submitQuery: submitQuery,
      setSnack,
    }} />
    <Document {...{
      title: "Resume Generation Architecture",
      filepath: "/docs/resume-generation.md",
      onExpand: (open: boolean) => { onDocumentExpand('resume-generation', open); },
      expanded: page === 'resume-generation',
      sessionId,
      submitQuery: submitQuery,
      setSnack,
    }} />
    <Document {...{
      title: "Application Architecture",
      filepath: "/docs/about-app.md",
      onExpand: (open: boolean) => { onDocumentExpand('about-app', open); },
      expanded: page === 'about-app',
      sessionId,
      submitQuery: submitQuery,
      setSnack,
    }} />
  </Scrollable>;
};

export {
  AboutPage
};