xiaoxia-saas/apps/web/src/pages/editing-planner/components/StickerPanel/index.tsx

import React from "react"
import { Drawer, Switch } from "antd"
import type { StickerConfig } from "../../types"

import { useStickerPanel } from "./hooks/useStickerPanel"
import { StickerTabs } from "./components/StickerTabs"
import { StickerList } from "./components/StickerList"
import { StickerPropsEditor } from "./components/StickerPropsEditor"

export interface StickerPanelProps {
  open: boolean
  onClose: () => void
  config: StickerConfig
  onChange: (config: StickerConfig) => void
  totalDuration: number
}

const StickerPanel: React.FC<StickerPanelProps> = ({
  open,
  onClose,
  config,
  onChange,
  totalDuration,
}) => {
  const {
    selectedId,
    setSelectedId,
    selectedSticker,
    activeTab,
    setActiveTab,
    textInput,
    setTextInput,
    updateItem,
    addSticker,
    removeSticker,
  } = useStickerPanel({ config, onChange, totalDuration })

  const handleEmojiAdd = (emoji: string) => {
    addSticker("emoji", emoji)
  }

  const handleImageAdd = (url: string) => {
    addSticker("image", url)
  }

  const handleTextAdd = (text: string) => {
    addSticker("text", text)
    setTextInput("")
  }

  return (
    <Drawer
      title="贴纸"
      placement="right"
      width={460}
      open={open}
      onClose={onClose}
      className="sticker-panel-drawer"
    >
      {/* 顶部开关 */}
      <div className="sticker-header">
        <span className="sticker-header-label">启用贴纸</span>
        <Switch
          size="small"
          checked={config.enabled}
          onChange={(checked) => onChange({ ...config, enabled: checked })}
        />
      </div>

      {/* Tab 选择器 + 内容 */}
      <StickerTabs
        activeTab={activeTab}
        onTabChange={setActiveTab}
        textInput={textInput}
        onTextInputChange={setTextInput}
        onAddEmoji={handleEmojiAdd}
        onAddImage={handleImageAdd}
        onAddText={handleTextAdd}
      />

      {/* 已添加贴纸列表 */}
      <StickerList
        items={config.items}
        selectedId={selectedId}
        onSelect={setSelectedId}
        onRemove={removeSticker}
      />

      {/* 选中贴纸的属性编辑 */}
      {selectedSticker && (
        <StickerPropsEditor
          sticker={selectedSticker}
          totalDuration={totalDuration}
          onChange={updateItem}
        />
      )}
    </Drawer>
  )
}

export default StickerPanel