"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";
import { FaChevronLeft } from "react-icons/fa6";
import { useTheme } from "next-themes";
import { useState, useEffect } from "react";

import Button from "@/components/common/button";
import {
  generateRandomHeadline,
  Headline,
} from "@/utils/generate-random-headline";
import {
  generateRandomImage,
  RandomImage,
} from "@/utils/generate-random-image";
import useMediaBreakpoints, {
  MediaBreakpoints,
} from "@/hooks/useMediaBreakpoints";
import useDeviceType from "@/hooks/useDeviceType";

type LeftSectionImageHeadlineProps = {
  isSignup?: boolean;
  isAccessibilityCollective?: boolean;
};

function LeftSectionImageHeadline({
  isSignup = false,
  isAccessibilityCollective = false,
}: LeftSectionImageHeadlineProps) {
  const router = useRouter();
  const { theme } = useTheme();
  const [randomHeadline, setRandomHeadline] = useState<Headline | null>(null);
  const [randomImage, setRandomImage] = useState<RandomImage | null>(null);
  const width = isSignup ? "xl:w-5/12" : "xl:w-1/2";
  const screenSize = useMediaBreakpoints();
  const deviceType = useDeviceType();

  useEffect(() => {
    const headline = generateRandomHeadline(isAccessibilityCollective);
    const image = generateRandomImage("participant", theme as "light" | "dark");

    setRandomHeadline(headline);
    setRandomImage(image);
  }, [isAccessibilityCollective, theme]);

  // Prevent rendering on iOS devices (including iPads) and non-desktop screen sizes.
  // This is necessary to avoid a crash specific to iOS Safari, where the page fails to load
  // and repeatedly reloads with the "A problem repeatedly occurred" error caused by some sort of update
  // on iOS/webkit.
  if (
    deviceType === "ios" ||
    (screenSize !== MediaBreakpoints.DESKTOP &&
      screenSize !== MediaBreakpoints.XXL &&
      screenSize !== MediaBreakpoints.XXXL)
  ) {
    return null;
  }

  return (
    <div
      className={`${width} hidden relative xl:flex flex-col items-center justify-start py-24`}
    >
      <div className="absolute top-0 left-0 flex flex-row space-x-6 items-center p-6">
        <Button
          btnLabel="Go back"
          customVariant="no-border"
          size="sm"
          startContent={<FaChevronLeft />}
          onClick={() => router.back()}
        />
      </div>
      {randomImage && (
        <div className="relative w-[500px] h-[500px] flex items-center justify-center">
          <Image
            alt="" // Image alt is empty because the image is decorative.
            className="mx-auto object-fill rounded-none shadow-none"
            height={400}
            loading="eager"
            src={randomImage?.src || ""}
            width={400}
          />
        </div>
      )}
      {randomHeadline && (
        <div className="hidden mt-16 xl:flex flex-col text-center text-black dark:text-white">
          <span className="text-2xl font-black font-inter">
            {randomHeadline.heading}
          </span>
          <span className="text-base font-noto mx-4">
            {randomHeadline.subheading}
          </span>
        </div>
      )}
    </div>
  );
}

export default LeftSectionImageHeadline;