import { useNavigate } from "react-router-dom";
import { BackgroundImage, Image } from "@/components";
import { getStaticImage } from "@/utils";
import { useState } from "react";

/**
 * 卢航-未选中.png
 * 龚丹-未选中.png
 * 曹君-未选中.png
 */
const teachers = [
  {
    id: 1,
    name: "卢航",
    avatar: getStaticImage("menu/卢航-未选中.png"),
    selectedAvatar: getStaticImage("menu/卢航-选中.png"),
    position: {
      top: "20%",
      left: "12%",
    },
  },
  {
    id: 2,
    name: "曹君",
    avatar: getStaticImage("menu/曹君-未选中.png"),
    selectedAvatar: getStaticImage("menu/名师曹君选中.png"),
    position: {
      top: "10%",
      left: "39%",
    },
  },
  {
    id: 3,
    name: "龚丹",
    avatar: getStaticImage("menu/龚丹-未选中.png"),
    selectedAvatar: getStaticImage("menu/曹君-选中.png"),
    position: {
      top: "20%",
      left: "65%",
    },
  },
];

export default function Home() {
  const navigate = useNavigate();
  const [selectedTeacherId, setSelectedTeacherId] = useState(0);

  const handleSelectTeacher = (teacherId: number) => {
    setSelectedTeacherId(teacherId);
  };

  const handleStartExperiment = () => {
    console.log("点击开启实验");
    // navigate("/experiment");
  };

  return (
    <BackgroundImage
      src={getStaticImage("menu/首页背景.png")}
      className="h-full w-full relative"
      backgroundSize="cover"
      backgroundPosition="center"
    >
      <Image
        src={getStaticImage("components/按钮-返回.png")}
        alt="返回"
        button
        className="absolute top-0 right-0"
        onClick={handleStartExperiment}
      />

      <Image
        src={getStaticImage("menu/内页居中标题.png")}
        alt="文字"
        className="absolute bottom-0 left-1/2 transform -translate-x-1/2"
      />

      <BackgroundImage
        src={getStaticImage("menu/转盘合.png")}
        className="absolute w-full h-500 -bottom-1/5 left-0"
        backgroundSize="cover"
        backgroundPosition="center"
      >
        {teachers.map((teacher) => (
          <Image
            key={teacher.id}
            src={
              selectedTeacherId === teacher.id
                ? teacher.selectedAvatar
                : teacher.avatar
            }
            alt={teacher.name}
            onClick={() => handleSelectTeacher(teacher.id)}
            className="absolute"
            style={{
              top:
                selectedTeacherId === teacher.id ? "4%" : teacher.position.top,
              left:
                selectedTeacherId === teacher.id
                  ? "36%"
                  : teacher.position.left,
              transition: "transform 0.2s ease, z-index 0.2s ease",
            }}
            button={selectedTeacherId !== teacher.id}
          />
        ))}
      </BackgroundImage>
    </BackgroundImage>
  );
}