import Head from "next/head";
import { NextPage, GetServerSideProps, GetServerSidePropsContext } from "next";
import { Grid, Box } from "@mui/material";
import { Layout } from "components/Layout";
import { TicketDetail } from "components/TicketDetail";
import { TicketEdit } from "components/TicketEdit";

const Link: NextPage = ({ ticket, articles }: any) => (
  <Layout>
    <Head>
      <title>Link Shell</title>
    </Head>
    <Grid container spacing={0} sx={{ height: "100vh" }} direction="row">
      <Grid item sx={{ height: "100vh" }} xs={10}>
        <TicketDetail ticket={ticket} articles={articles} />
      </Grid>
      <Grid item xs={2} sx={{ height: "100vh" }}>
        <TicketEdit ticket={ticket} />
      </Grid>
    </Grid>
  </Layout>
);

export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const {
    params: { id },
  } = context;
  const baseURL = `${process.env.ZAMMAD_URL}/api/v1`;
  const token = process.env.ZAMMAD_API_TOKEN;
  const headers = { Authorization: `Token ${token}` };
  const rawTicket = await fetch(`${baseURL}/tickets/${id}`, {
    headers,
  });
  const ticket = await rawTicket.json();
  const rawArticles = await fetch(
    `${baseURL}/ticket_articles/by_ticket/${id}`,
    {
      headers,
    }
  );
  const articles = await rawArticles.json();

  console.log({ ticket, articles });

  return {
    props: {
      ticket,
      articles,
    },
  };
};
export default Link;
