import { Metadata } from "next";
import { cookies } from "next/headers";

import IncomeOccupation from "@/components/pages/participant/sign-up/income-occupation";
import { CORE_ENDPOINTS } from "@/constants/api-mappings/external-api-mapping";
import LeftSectionImageHeadline from "@/components/common/left-section-image-headline";
import { decryptCookie } from "@/utils/cookie-utils";
import { getOptions } from "@/services/general-actions";
import { COOKIE_SIGNUP_USER_DATA } from "@/constants/cookie-mapping";
import { CreateUserData } from "@/types/signup/user-signup-types";

export const metadata: Metadata = {
  title: "Income & Occupation | Signup",
};

export default async function IncomeOccupationPage() {
  const optionEndpoints = [
    CORE_ENDPOINTS.options.incomeBracket,
    CORE_ENDPOINTS.options.employment,
  ];

  const [incomeRangeOptions, employmentDataOptions] = await Promise.all(
    optionEndpoints.map((endpoint) => getOptions(endpoint))
  );

  const encUserData = cookies().get(COOKIE_SIGNUP_USER_DATA)?.value;
  const userData = encUserData && decryptCookie(encUserData);
  const parsedUserData = userData && JSON.parse(userData);
  const { firstName } = parsedUserData as CreateUserData;

  return (
    <div className="flex flex-col xl:flex-row bg-participant-light dark:bg-[#383934]">
      <LeftSectionImageHeadline isSignup />
      <IncomeOccupation
        employmentOptions={employmentDataOptions}
        incomeRangeOptions={incomeRangeOptions}
        userFirstName={firstName}
      />
    </div>
  );
}