import { GetServerSideProps, GetServerSidePropsContext } from "next";
import Head from "next/head";
import useSWR from "swr";
import { request, gql } from "graphql-request";
import { NextPage } from "next";
import { Grid } from "@mui/material";
import { Layout } from "components/Layout";
import { TicketDetail } from "components/TicketDetail";

type TicketProps = {
  id: string;
};

const Ticket: NextPage<TicketProps> = ({ id }) => {
  const origin =
    typeof window !== "undefined" && window.location.origin
      ? window.location.origin
      : "";
  const graphQLFetcher = async ({ document, variables }: any) => {
    const data = await request({
      url: `${origin}/graphql`,
      document,
      variables,
    });
    console.log({ data });

    return data;
  };

  const { data: ticketData, error: ticketError }: any = useSWR(
    {
      document: gql`
        query getTicket($ticketId: Int!) {
          ticket(ticket: { ticketInternalId: $ticketId }) {
            id
            internalId
            title
            note
            number
            createdAt
            updatedAt
            closeAt
            articles {
              edges {
                node {
                  id
                  body
                  internal
                  sender {
                    name
                  }
                }
              }
            }
          }
        }
      `,
      variables: { ticketId: parseInt(id, 10) },
    },
    graphQLFetcher,
    { refreshInterval: 1000 }
  );

  const { data: graphqlData2, error: graphqlError2 } = useSWR(
    {
      document: gql`
        {
          __schema {
            queryType {
              name
              fields {
                name
              }
            }
          }
        }
      `,
      variables: {},
    },
    graphQLFetcher
  );

  const shouldRender = !ticketError && ticketData;

  return (
    <Layout>
      <Head>
        <title>Link Shell</title>
      </Head>
      {shouldRender && (
        <Grid container spacing={0} sx={{ height: "100vh" }} direction="row">
          <Grid item sx={{ height: "100vh" }} xs={12}>
            <TicketDetail ticket={ticketData.ticket} />
          </Grid>
          {/*<Grid item xs={0} sx={{ height: "100vh" }}>
            <TicketEdit ticket={ticketData.ticket} />
      </Grid>*/}
        </Grid>
      )}
      {ticketError && <div>{ticketError.toString()}</div>}
    </Layout>
  );
};

export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const { id } = context.query;
  return { props: { id } };
};

export default Ticket;
