import React, { useEffect, useState } from "react";
import { Box, Grid, Typography } from "@mui/material";
import ContentWrapper from "../ContentWrapper/ContentWrapper";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import ThreeFormFields from "../form/ThreeFormFields";
import { store } from "../redux/store";
import { Provider } from "react-redux";

const Blog = (props) => {
  // console.log("props in blog", props.blog);
  window.scrollTo({ top: 0, behavior: "instant" });
  // const { pathname } = useLocation();
  // const slug = pathname.split("/")[2];
  // const [props.blog, setBlogData] = useState();
  // const navigate = useNavigate();

  // useEffect(() => {
  //   fetch(
  //     `https://curriculum-app-api.beanstalkedu.com/items/blog?filter[status][_eq]=published&filter[property][_eq]=aKadmy&filter[slug][_eq]=${slug}`
  //   )
  //     .then((res) => res.json())
  //     .then((data) => {
  //       setBlogData(data?.data?.[0]);
  //       if (data?.data.length === 0) {
  //         navigate("/404");
  //       }
  //     })
  //     .catch((err) => console.log("err123", err));
  // }, [slug]);

  // blog
  const newSchema =
    props.blog && props.blog.schema && props.blog?.schema.replaceAll("\n", "");
  const newSchema2 =
    props.blog &&
    props.blog.schema2 &&
    props.blog?.schema2.replaceAll("\n", "");
  const newSchema3 =
    props.blog &&
    props.blog.schema3 &&
    props.blog?.schema3.replaceAll("\n", "");

  // console.log("blogUrl", `https://akadmyapp.com${pathname}`);

  const metaData = {
    title: props.blog && props.blog.meta,
    description: props.blog && props.blog.meta_description,
    // canonical: `https://akadmyapp.com${pathname}`,
    og_title: props.blog && props.blog.og_title,
    og_desc: props.blog && props.blog.og_desc,
    siteName: "aKadmy",
    type: "website",
    url: "https://akadmyapp.com",
    img_url: `https://management.beanstalkedu.com/assets/${
      props.blog && props.blog.og_img
    }`,
    content: "product",
    creator: "@aKadmy",
  };

  return (
    <>
      <Provider store={store}>
        <ContentWrapper>
          <Header color={"#015C9F"} />
          <Grid container color={"#0348A8"} spacing={2}>
            <Grid item xs={12} md={8}>
              {props.blog?.title && <h1>{props.blog?.title}</h1>}
              <Typography variant="body2" my={0.6}>
                Published On: {props.blog?.date} | 5 min Read
              </Typography>
              {props.blog?.img && (
                <img
                  src={`https://management.beanstalkedu.com/assets/${props.blog?.img}`}
                  width={"100%"}
                  style={{ borderRadius: "8px" }}
                  alt={props.blog?.meta}
                />
              )}
              {props.blog?.preview_text && (
                <Typography my={4}>
                  <div
                    dangerouslySetInnerHTML={{
                      __html: props.blog?.preview_text,
                    }}
                  />
                </Typography>
              )}
            </Grid>
            <Grid item xs={12} md={4}>
              <Box sx={{ background: "#DEF0FD", p: 3 }}>
                <Typography>Get in Touch</Typography>
                <ThreeFormFields formName="Blogs" />
              </Box>
            </Grid>
          </Grid>
        </ContentWrapper>
        <Footer page="INTERAKTO_CODING" />
      </Provider>
    </>
  );
};

export default Blog;
