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

/**
 * 贴纸配置面板
 * 贴纸素材库（emoji / 图片）+ 文字花字 + 位置大小调整
 */
import React from "react"
import { Drawer, Switch } from "antd"
import type { StickerConfig } from "@/pages/editing-planner/types"
import StickerLibrary from "./sticker/StickerLibrary"
import StickerList from "./sticker/StickerList"
import StickerPropsEditor from "./sticker/StickerPropsEditor"
import { useStickerItems } from "@/pages/editing-planner/hooks/useStickerItems"

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,
    activeTab,
    setActiveTab,
    selectedSticker,
    updateItem,
    addSticker,
    removeSticker,
    handleReset,
  } = useStickerItems({ config, onChange, totalDuration })

  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 */}
      <StickerLibrary activeTab={activeTab} onTabChange={setActiveTab} onAddSticker={addSticker} />

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

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

      {/* 底部重置 */}
      <div className="sticker-footer">
        <button className="sticker-reset-btn" onClick={handleReset}>
          清空所有贴纸
        </button>
      </div>
    </Drawer>
  )
}

export default StickerPanel