import { FC, useEffect } from "react";
import { GetServerSideProps, GetServerSidePropsContext } from "next";
import { useTranslate } from "react-polyglot";
import { useRouter } from "next/router";
import { Box, Grid } from "@mui/material";
import { useCookies } from "react-cookie";
import { getTemplates } from "@/app/_lib/opensearch";
import { useAppContext } from "@/app/_components/AppProvider";
import { PageHeader } from "@/app/_components/PageHeader";
import { VisualizationBuilder } from "@/app/_components/VisualizationBuilder";
import { getEmbedded } from "@/app/_lib/utils";

type CreateProps = {
  templates: any;
  embedded: boolean;
};

const Create: FC<CreateProps> = ({ templates, embedded }) => {
  const t = useTranslate();
  const {
    colors: { cdrLinkOrange },
    typography: { h1, h4 },
  } = useAppContext();
  const router = useRouter();
  const cookieName = "searchIntroComplete";
  const [cookies, setCookie] = useCookies([cookieName]);
  const searchIntroComplete = parseInt(cookies[cookieName], 10) || 0;

  useEffect(() => {
    if (searchIntroComplete === 0) {
      setCookie(cookieName, `${1}`, { path: "/" });
      router.push(`${router.pathname}?group=search&tooltip=1&checklist=1`);
    }
  }, [searchIntroComplete, router, setCookie]);

  return (
    <>
      <PageHeader backgroundColor={cdrLinkOrange}>
        <Grid container direction="row" spacing={2} alignItems="center">
          {/*           <Grid item xs={2} sx={{ textAlign: "center" }}>
            <Image src={SearchCreateHeader} width={100} height={100} alt="" />
          </Grid> */}
          <Grid container direction="column" item xs={10}>
            <Grid item>
              <Box component="h1" sx={{ ...h1 }}>
                {t("searchAndCreateTitle")}
              </Box>
            </Grid>
            <Grid item>
              <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
                {t("searchAndCreateSubtitle")}
              </Box>
            </Grid>
            {/*      <Grid>
              <Box component="p" sx={{ ...p }}>
                {t("searchAndCreateDescription")}
              </Box>
            </Grid> */}
          </Grid>
        </Grid>
      </PageHeader>

      <VisualizationBuilder templates={templates} />
    </>
  );
};

export default Create;

export const getServerSideProps: GetServerSideProps = async (
  context: GetServerSidePropsContext
) => {
  const templates = await getTemplates(100);

  return { props: { templates, embedded: getEmbedded(context) } };
};