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

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

export const metadata: Metadata = {
  title: "User Information | Signup",
};

export default async function PersonalInformationPage() {
  const optionEndpoints = [
    CORE_ENDPOINTS.options.countries,
    CORE_ENDPOINTS.options.gender,
    CORE_ENDPOINTS.options.ethnicity,
    CORE_ENDPOINTS.options.devices,
  ];

  const [countryOptions, genderOptions, ethnicityOptions, devicesOptions] =
    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 />
      <UserInformation
        countryOptions={countryOptions}
        devicesOptions={devicesOptions}
        ethnicityOptions={ethnicityOptions}
        genderOptions={genderOptions}
        userFirstName={firstName}
      />
    </div>
  );
}