"use client";

import { useState } from "react";
import { HiUserGroup, HiHeart, HiAdjustmentsHorizontal } from "react-icons/hi2";

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

import { useInputGeneration } from "./hooks/useInputGeneration";
import { Collections } from "./collections";
import { Settings } from "./settings";

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

export const Main = () => {
  const { prompt, setPrompt, submit, loading, list_styles, style, setStyle } =
    useInputGeneration();
  const [category, setCategory] = useState<string>("community");
  const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);

  return (
    <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
      <div className="py-2 pl-2 pr-4 bg-black bg-opacity-30 backdrop-blur-sm sticky top-6 z-10 rounded-full">
        <div className="flex flex-col lg:flex-row items-center justify-between w-full">
          <InputGeneration
            prompt={prompt}
            onChange={setPrompt}
            onSubmit={submit}
            loading={loading}
          />
          <div className="items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0 hidden lg:flex">
            {categories.map(({ key, label, icon }) => (
              <Button
                key={key}
                theme={key !== category ? "white" : "primary"}
                onClick={() => setCategory(key)}
              >
                {icon}
                {label}
              </Button>
            ))}
          </div>
        </div>
        <p
          className="text-white/70 font-medium text-sm flex items-center justify-start gap-2 hover:text-white cursor-pointer mt-3"
          onClick={() => setAdvancedSettings(!advancedSettings)}
        >
          <HiAdjustmentsHorizontal className="w-5 h-5" />
          Advanced settings
        </p>
        <Settings
          open={advancedSettings}
          style={style}
          setStyle={setStyle}
          list_styles={list_styles}
        />
      </div>
      <Collections category={category} />
    </main>
  );
};