flatrender/src/components/studio/sidebar/TransitionsSidebarContent.tsx

"use client";

import { useEffect, useState } from "react";
import { Info } from "lucide-react";
import { useTranslations } from "next-intl";

import { useStudioStore } from "@/lib/studio-store";
import type { SceneTransition } from "@/lib/studio-types";
import { cn } from "@/lib/utils";

const TRANSITION_OPTIONS = [
  {
    id: "random",
    label: "Random Transition",
    description: "Random",
    gradientFrom: "#3b82f6",
    gradientTo: "#8b5cf6",
  },
  {
    id: "none",
    label: "No Transition",
    description: "None",
    gradientFrom: "#374151",
    gradientTo: "#1f2937",
  },
] as const;

type TransitionOptionId = (typeof TRANSITION_OPTIONS)[number]["id"];

function scenesUseTransition(scenes: { transitionType?: SceneTransition }[]): boolean {
  return scenes.some((scene) => (scene.transitionType ?? "none") !== "none");
}

function optionToTransitionType(id: TransitionOptionId): SceneTransition {
  return id === "random" ? "fade" : "none";
}

function TransitionOptionCard({
  option,
  label,
  selected,
  onSelect,
}: {
  option: (typeof TRANSITION_OPTIONS)[number];
  label: string;
  selected: boolean;
  onSelect: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={cn(
        "w-full cursor-pointer overflow-hidden rounded-lg ring-2 ring-transparent transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
        selected && "ring-[#4c6ef5]"
      )}
    >
      <div
        className="flex aspect-[4/3] flex-col items-center justify-center gap-1"
        style={{
          background: `linear-gradient(135deg, ${option.gradientFrom}, ${option.gradientTo})`,
        }}
      >
        <span className="mx-auto h-2 w-3/4 rounded bg-white/30" aria-hidden />
        <span className="mx-auto h-2 w-3/4 rounded bg-white/30" aria-hidden />
        <span className="mx-auto h-2 w-3/4 rounded bg-white/30" aria-hidden />
      </div>
      <p className="bg-gray-100 py-1.5 text-center text-[11px] font-semibold text-gray-700">
        {label}
      </p>
    </button>
  );
}

export function TransitionsSidebarContent() {
  const t = useTranslations("auto.componentsStudioSidebarTransitionsSidebarContent");
  const scenes = useStudioStore((state) => state.scenes);
  const applyTransitionToAllScenes = useStudioStore(
    (state) => state.applyTransitionToAllScenes
  );

  const [selectedOption, setSelectedOption] = useState<TransitionOptionId>(() =>
    scenesUseTransition(scenes) ? "random" : "none"
  );

  useEffect(() => {
    setSelectedOption(scenesUseTransition(scenes) ? "random" : "none");
  }, [scenes]);

  const handleSelect = (id: TransitionOptionId) => {
    setSelectedOption(id);
    applyTransitionToAllScenes(optionToTransitionType(id));
  };

  return (
    <aside className="flex h-full w-full flex-col overflow-hidden bg-white text-gray-900">
      <h2 className="shrink-0 border-b border-gray-200 px-3 py-3 text-xs font-semibold uppercase tracking-wide text-gray-400">
        {t("heading")}
      </h2>

      <div className="grid grid-cols-2 gap-2 p-2">
        {TRANSITION_OPTIONS.map((option) => (
          <TransitionOptionCard
            key={option.id}
            option={option}
            label={option.id === "random" ? t("randomTransition") : t("noTransition")}
            selected={selectedOption === option.id}
            onSelect={() => handleSelect(option.id)}
          />
        ))}
      </div>

      <div className="flex items-start gap-2 px-3 py-2 text-[10px] leading-relaxed text-gray-500">
        <Info className="mt-0.5 h-3 w-3 shrink-0 text-gray-600" aria-hidden />
        <p>{t("exportNote")}</p>
      </div>
    </aside>
  );
}