import {
  IonBackButton,
  IonButtons,
  IonCard,
  IonCardContent,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react";
import { RouteComponentProps } from "react-router";
import { NotionRenderer } from "react-notion-x";
import { fetcher } from "../lib/api";
import useSWR from "swr";
import { formatDate, getBlockTitle, getPageProperty } from "notion-utils";
import SkeletonText from "../components/SkeletonText";

const ArticlePage: React.FC<RouteComponentProps<{ articleId: string }>> = ({
  match,
}) => {
  const { data, error } = useSWR<any>(
    `/api/getTopic/?id=${match.params.articleId}`,
    fetcher
  );
  const isLoading = !data && !error;
  const keys = Object.keys(data?.block || {});
  const block = data?.block?.[keys[0]]?.value;
  const title = data && getBlockTitle(block, data);
  const date =
    data &&
    formatDate(block?.last_edited_time, {
      month: "long",
    });
  const recordMap = data;
  console.log(recordMap);

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton />
          </IonButtons>
          <IonTitle>
            {data ? getBlockTitle(block, data) : <SkeletonText />}
          </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonCardHeader className="notion">
          <IonCardTitle>{title ?? <SkeletonText />}</IonCardTitle>
          <IonCardSubtitle>{date ?? <SkeletonText />}</IonCardSubtitle>
        </IonCardHeader>
        <IonCardContent>
          {!recordMap && (
            <div>
              <SkeletonText />
              <SkeletonText />
              <SkeletonText />
              <SkeletonText />
              <SkeletonText />
              <SkeletonText />
            </div>
          )}
          {recordMap && (
            <NotionRenderer
              recordMap={recordMap}
              fullPage={true}
              darkMode={false}
            />
          )}
        </IonCardContent>
      </IonContent>
    </IonPage>
  );
};

export default ArticlePage;