"use client";

import { useState } from "react";
import classNames from "classnames";
import { motion } from "framer-motion";
import { HiUserGroup, HiHeart } from "react-icons/hi2";

import { InputGeneration } from "@/components/input-generation";
import { Button } from "@/components/button";
import { useInputGeneration } from "./hooks/useInputGeneration";

const categories = [
  {
    key: "community",
    label: "Community",
    icon: <HiUserGroup className="text-2xl" />,
  },
  {
    key: "my-own",
    label: "My own generations",
    icon: <HiHeart className="text-2xl" />,
  },
];

const IMAGES = [
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt13.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt01.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt02.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/09/prompt06.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt14.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt17.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/03/prompt18.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt27.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt32.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2022/10/prompt34.jpg",
  "https://www.blueshadow.art/wp-content/uploads/2023/01/prompt44.jpg",
];

export const Main = () => {
  const { prompt, setPrompt, submit, loading } = useInputGeneration();
  const [category, setCategory] = useState<string>("community");

  return (
    <main className="pt-6 z-[2] relative">
      <div className="px-6 mx-auto max-w-7xl">
        <div className="flex items-center justify-between w-full -translate-y-1/2">
          <InputGeneration
            prompt={prompt}
            onChange={setPrompt}
            onSubmit={submit}
            loading={loading}
          />
          <div className="flex items-center justify-end gap-5 w-full">
            {categories.map(({ key, label, icon }) => (
              <Button
                key={key}
                theme={key !== category ? "white" : "primary"}
                onClick={() => setCategory(key)}
              >
                {icon}
                {label}
              </Button>
            ))}
          </div>
        </div>
      </div>
      <div className="px-6 max-w-[1722px] mx-auto grid grid-cols-5 gap-5 mt-14">
        {Array.from({ length: 5 }).map((_, e) => (
          <div
            key={e}
            className={classNames("w-full grid-cols-1 grid gap-5", {
              "translate-y-12": e % 2,
            })}
          >
            {Array.from({ length: 6 }).map((_, i) => (
              <motion.div
                key={i}
                initial={{ y: 100, opacity: 0 }}
                animate={{ y: 0, opacity: 1 }}
                transition={{ duration: 0.35, delay: i * 0.1 }}
                className="rounded-3xl h-[377px] bg-cover cursor-pointer relative z-[1] group overflow-hidden"
              >
                <div
                  style={{
                    backgroundImage: `url(${
                      IMAGES[Math.floor(Math.random() * IMAGES.length)]
                    })`,
                  }}
                  className="rounded-3xl bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-125"
                />
              </motion.div>
            ))}
          </div>
        ))}
      </div>
    </main>
  );
};