import { QuestionProvider } from "@/providers";
import { cookies, headers } from "next/headers";
import { detectPlatform } from "@/utils/detectPlatform";

import {
  Decode,
  getborderImage,
  getComponentBaseOnQuestionType,
  getDescription,
  getHintSection,
  getQuestionTitle,
  parseQueryParams,
} from "@/utils";
import { getQuestion } from "@/components/questions/questions.services";
import QuestionHeader from "@/components/questions/question-header/QuestionHeader";

const Questions = async ({ params, searchParams }: { params: { slug: string }, searchParams?: { token?: string, referral?: string, phone?: string } }) => {
  console.log({ token: searchParams?.token, referral: searchParams?.referral })
  const cookieStore = cookies();
  const Authorization = cookieStore.get("Authorization")?.value;
  const phone = cookieStore.get("phone")?.value;
  const userCode = cookieStore.get("code")?.value;
  const type = cookieStore.get("type")?.value;
  const quesryString = params?.slug[0];
  const header = headers();
  const userAgent = header.get("user-agent") || ""
  const ip = (header.get("x-forwarded-for") ?? "127.0.0.1").split(",")[0];
  const platform = detectPlatform(userAgent);
  const question = await getQuestion({
    params: quesryString,
    Authorization: Authorization ?? searchParams?.token,
    userCode,
    type,
    ip,
    referral: searchParams?.referral,
    phone: phone ?? searchParams?.phone,
    platform
  });
  const queryParams = parseQueryParams(Decode(quesryString));

  /**
   * template
   * _______________________________________________________________________________
   */

  return (
    <>
      {question && <QuestionHeader data={question} progressType={queryParams.type === "tamdid" ? "steps" : "default"} />}
      <QuestionProvider bgColor={question?.parasite.bgColor} questions={question} progressType={queryParams.type === "tamdid" ? "steps" : "default"}>
        {getQuestionTitle(question?.questionType, question?.text)}
        {getDescription(question?.description)}
        {getComponentBaseOnQuestionType(question)}
        {getHintSection(question)}
        {getborderImage(question)}
      </QuestionProvider>
    </>
  );
};

export default Questions;
