import {
  IonContent,
  IonHeader,
  IonLoading,
  IonPage,
  IonTitle,
  IonToast,
  IonToolbar,
} from "@ionic/react";
import { alertCircleOutline } from "ionicons/icons";
import useSWR from "swr";
import TopicList from "../components/TopicList";
import { fetcher } from "../lib/api";
import { Topic } from "../types";

const LawListPage: React.FC = () => {
  const { data, error } = useSWR<Topic[]>(
    "/api/getTopicList?type=laws",
    fetcher
  );
  const isLoading = !data && !error;

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Leyes</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Leyes</IonTitle>
          </IonToolbar>
        </IonHeader>
        {data && <TopicList loading={isLoading} topics={data as Topic[]} />}
        <IonToast
          icon={alertCircleOutline}
          color="danger"
          isOpen={error !== undefined}
          message="Failed to load items."
          duration={1500}
        />
      </IonContent>
    </IonPage>
  );
};

export default LawListPage;