import "./ReportDetails.scss";
import { IReport } from "@/shared/types/report-type";
import ReviewSection from "@/widgets/ReviewSection/ReviewSection";
import { Metadata } from "next";
import ReportInformation from "@/widgets/report-details/ReportInformation/ReportInformation";
import ReportImages from "@/widgets/report-details/ReportImages/ReportImages";
import dynamic from "next/dynamic";
import BreadCrumbs from "@/features/BreadCrumbs/BreadCrumbs";
import { apiInstance } from "@/shared/config/apiConfig";

const DynamicMap = dynamic(
  () => import("@/widgets/report-details/ReportMap/ReportMap"),
  {
    ssr: false,
  }
);

export async function generateMetadata({
  params,
}: {
  params: { id: string };
}): Promise<Metadata> {
  const response = await apiInstance.get<IReport>(
    `/report/${params.id}/`
  );

  return {
    title: `KG ROAD | ${response.data.description}`,
    description: `${response.data.location[0].address}, ${response.data.description}`,
    openGraph: {
      title: `KG ROAD | ${response.data.description}`,
      description: `${response.data.location[0].address}, ${response.data.description}`,
      images: [response.data.image[0].image],
      type: "article",
    },
  };
}

const ReportDetails = async ({
  params,
}: {
  params: { id: string };
}) => {
  const getReportDetails = async () => {
    try {
      const res = await fetch(
        `${process.env.NEXT_PUBLIC_BASE_API}/report/${params.id}/`,
        { cache: "no-store" }
      );

      return res.json();
    } catch (error) {
      console.log(error);
    }
  };
  const report: IReport = await getReportDetails();

  return (
    <div className="report-details page-padding">
      <BreadCrumbs homeRequired />
      <div className="report-details__container">
        <ReportInformation
          id={report.id}
          location={report.location[0]}
          date={report.created_at}
          description={report.description}
          category={report.category}
          total_likes={report.total_likes}
          author={report.author}
        />
        <div className="report-details__map">
          <DynamicMap
            location={report.location}
            category={report.category}
          />
        </div>
        <ReportImages images={report.image} />
      </div>

      <ReviewSection endpoint="report" id={+params.id} />
    </div>
  );
};

export default ReportDetails;