import React, { useEffect } from "react";
import { useState } from "react";
import style from "./blog.module.css";
import { customerApi } from "@/api/api";
import Loader from "@/components/utils/loader";
import Head from "next/head";
import Image from "next/image";
import moment from "moment";
import ReactHtmlParser from "react-html-parser";
import { ArrowBackIos } from "@mui/icons-material";
import { useRouter } from "next/router";

const ProductDetail = ({ breadcumbs, data }) => {
  console.log("dataaa:", data.postData);
  const [postData, setPostData] = useState(data.postData);
  const [loader, setLoader] = useState(false);
  const router = useRouter();

  return (
    <React.Fragment>
      <Head>
        <title>
          {postData.title + " - " + process.env.NEXT_PUBLIC_COMPANY_NAME}
        </title>
      </Head>
      <div className="container">
        <div className={`${style.back_btn}`}>
          <button
            type="button"
            className="secondary-btn"
            onClick={() => router.push("/blog")}
          >
            <ArrowBackIos />
          </button>
        </div>
        {loader && <Loader className={style.loader} />}
        {!loader && postData.title && (
          <div className={style.post_section}>
            <h1 className={style.title}>{postData.title}</h1>
            <div className={style.post_info}>
              <div className={style.date}>
                {moment(postData.data).format("DD MMM YYYY")}
              </div>
            </div>
            <p className={style.subtitle}>{postData.subtitle}</p>

            {postData.cover_image && (
              <div className={style.header_image}>
                <Image
                  src={
                    process.env.NEXT_PUBLIC_UPLOADS +
                    "/blogs/" +
                    postData.cover_image
                  }
                  alt=""
                  fill
                  className={style.cover_image}
                />
              </div>
            )}

            <p className={style.body}>
              {ReactHtmlParser(postData.description)}
            </p>
          </div>
        )}
      </div>
    </React.Fragment>
  );
};

export default ProductDetail;

export const getServerSideProps = async (ctx) => {
  let postData = {};
  if (!ctx.query.id)
    return {
      redirect: {
        destination: "/blog",
        permanent: false,
      },
    };
  const id = ctx.query.id.split("_")[0];
  await customerApi
    .get("/blog/post?_id=" + id)
    .then((res) => {
      console.log("res.data.data.result: ", res.data.data);
      if (!res.data.data)
        return {
          redirect: {
            destination: "/blog",
            permanent: false,
          },
        };
      let newArray = { ...res.data.data };
      postData = newArray;
    })
    .catch((err) => {
      return {
        redirect: {
          destination: "/blog",
          permanent: false,
        },
      };
    });

  return {
    props: {
      data: {
        postData: postData,
      },
    },
  };
};
