"use client";

import {
  Image as ImageIcon,
  Video,
  Smile,
  BarChart2,
  Send,
} from "lucide-react";
import { Avatar } from "./Avatar";
import { useAuth } from "@/lib/auth-context";
import { useCreatePost } from "@/lib/create-post-context";

/**
 * The bar at the top of the feed.
 *
 * The four shortcuts under the box open the composer with that tool
 * already chosen, so sharing a photo is one press rather than two.
 *
 * Whether they show is left to the theme. The built-in one hides them —
 * they are four shortcuts to a window that offers the same four the
 * moment it opens — and Golden shows them, because there they are the
 * design rather than an extra row. The markup is the same either way, so
 * switching theme is all it takes.
 */
export function CreatePostTrigger() {
  const { user } = useAuth();
  const { open } = useCreatePost();

  if (!user) return null;

  const tools = [
    { id: "photo", label: "Photo", icon: ImageIcon, tone: "#22c55e" },
    { id: "video", label: "Video", icon: Video, tone: "#ec4899" },
    { id: "poll", label: "Poll", icon: BarChart2, tone: "#8b5cf6" },
    { id: "feeling", label: "Feeling", icon: Smile, tone: "#f59e0b" },
  ];

  return (
    <div className="cpt">
      <div className="cpt-top">
        <Avatar user={user} size={44} />

        <button onClick={() => open()} className="cpt-ask">
          <b>
            What&apos;s on your mind, <i>{user.name.split(" ")[0]}</i>?
          </b>
          <em>Share your thoughts, ideas or updates</em>
        </button>

        <button onClick={() => open()} className="cpt-post">
          <Send size={16} />
          Post
        </button>
      </div>

      <div className="cpt-tools">
        {tools.map((t) => (
          <button
            key={t.id}
            onClick={() => {
              open();
              // The composer picks this up and reaches for that tool, so a
              // photo is one press rather than two.
              setTimeout(
                () =>
                  window.dispatchEvent(
                    new CustomEvent("xr-compose-tool", { detail: t.id })
                  ),
                60
              );
            }}
            className="cpt-tool"
            style={{ ["--tone" as string]: t.tone }}
          >
            <t.icon size={19} />
            {t.label}
          </button>
        ))}
      </div>
    </div>
  );
}