"use client";

import { FC, useEffect } from "react";
import { useTranslate } from "react-polyglot";
import { useRouter, usePathname } from "next/navigation";
import { Box, Grid } from "@mui/material";
import { useCookies } from "react-cookie";
import { useLeafcutterContext } from "./LeafcutterProvider";
import { PageHeader } from "./PageHeader";
import { VisualizationBuilder } from "./VisualizationBuilder";

type CreateProps = {
  templates: any;
};

export const Create: FC<CreateProps> = ({ templates }) => {
  const t = useTranslate();
  const {
    colors: { cdrLinkOrange },
    typography: { h1, h4 },
  } = useLeafcutterContext();
  const router = useRouter();
  const pathname = usePathname() ?? "";
  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(`${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} />
    </>
  );
};