import { useEffect, useState } from "react";
import ModelsSwitcher from "@/components/ModelsSwitcher";
import ModelViewer from "@/components/ModelViewer";

export type CurrentModel =
  | "pure-white"
  | "urban-grey"
  | "fresh-lime"
  | "electric-blue"
  | "mochaccino"
  | "space-black"
  | "midnight-blue"
  | "prototype-grey"
  | "curshed-mint";

const ALL_MODELS: CurrentModel[] = [
  "pure-white",
  "urban-grey",
  "fresh-lime",
  "electric-blue",
  "mochaccino",
  "space-black",
  "midnight-blue",
  "prototype-grey",
  "curshed-mint",
];

const ModelsWrapper = () => {
  const [currentModel, setCurrentModel] = useState<CurrentModel>("pure-white");

  useEffect(() => {
    const preloadOtherFrames = () => {
      ALL_MODELS.forEach((model) => {
        if (model === "pure-white") return;

        for (let i = 1; i < 35; i++) {
          const img = new Image();
          img.src = `/models/${model}-${i}.webp`;
        }
      });
    };

    const timeout = setTimeout(preloadOtherFrames, 2000);
    return () => clearTimeout(timeout);
  }, []);

  const handleChangeModel = (model: CurrentModel) => setCurrentModel(model);

  return (
    <div className="flex flex-col lg:flex-row gap-2">
      <ModelViewer currentModel={currentModel} />
      <ModelsSwitcher currentModel={currentModel} handleChangeModel={handleChangeModel} />
    </div>
  );
};

export default ModelsWrapper;