import { DraggableItem } from "@/components/ui/draggable-item";
import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
import { useEditor } from "@/hooks/use-editor";
import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
import { buildTextElement } from "@/lib/timeline/element-utils";

export function TextView() {
  const editor = useEditor();

  const handleAddToTimeline = ({ currentTime }: { currentTime: number }) => {
    const activeScene = editor.scenes.getActiveScene();
    if (!activeScene) return;

    const element = buildTextElement({
      raw: DEFAULT_TEXT_ELEMENT,
      startTime: currentTime,
    });
    const textTrack = activeScene.tracks.find((t) => t.type === "text");
    if (textTrack) {
      editor.timeline.addElementToTrack({
        trackId: textTrack.id,
        element,
      });
    }
  };

  return (
    <BaseView>
      <DraggableItem
        name="Default text"
        preview={
          <div className="bg-panel-accent flex size-full items-center justify-center rounded">
            <span className="select-none text-xs">Default text</span>
          </div>
        }
        dragData={{
          id: "temp-text-id",
          type: DEFAULT_TEXT_ELEMENT.type,
          name: DEFAULT_TEXT_ELEMENT.name,
          content: DEFAULT_TEXT_ELEMENT.content,
        }}
        aspectRatio={1}
        onAddToTimeline={handleAddToTimeline}
        shouldShowLabel={false}
      />
    </BaseView>
  );
}