import Head from "next/head";
import useSWR from "swr";
import { NextPage } from "next";
import { Layout } from "components/Layout";
import { TicketList } from "components/TicketList";
import { getTicketsByOverviewQuery } from "graphql/getTicketsByOverviewQuery";

const Urgent: NextPage = () => {
  const { data: ticketData, error: ticketError }: any = useSWR(
    {
      document: getTicketsByOverviewQuery,
      variables: { overviewId: "gid://zammad/Overview/7" },
    },
    { refreshInterval: 10000 }
  );

  const shouldRender = !ticketError && ticketData;
  const tickets =
    ticketData?.ticketsByOverview?.edges.map((edge: any) => edge.node) || [];

  return (
    <Layout>
      <Head>
        <title>Link Shell – Urgent Tickets</title>
      </Head>
      {shouldRender && <TicketList title="Urgent" tickets={tickets} />}
      {ticketError && <div>{ticketError.toString()}</div>}
    </Layout>
  );
};

export default Urgent;
