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

import React from "react"
import BgmSelector from "./BgmSelector"
import SubtitleStylePanel from "./SubtitleStylePanel"
import TransitionSelector from "./TransitionSelector"
import SpeedPanel from "./SpeedPanel"
import TtsPanel from "./TtsPanel"
import WatermarkPanel from "./WatermarkPanel"
import IntroOutroPanel from "./IntroOutroPanel"
import PipConfigPanel from "./PipConfigPanel"
import FilterPanel from "./FilterPanel"
import GreenScreenPanel from "./GreenScreenPanel"
import StickerPanel from "./StickerPanel"
import type {
  ClipData,
  TransitionConfig,
  SpeedConfig,
  TtsConfig,
  WatermarkConfig,
  IntroOutroConfig,
  PipConfig,
  FilterConfig,
  ChromaKeyConfig,
  StickerConfig,
} from "../types"
import type { SubtitleStyleConfig } from "../types/subtitle"
import type { BgmMixConfig } from "@/api/bgm"
import { DEFAULT_TRANSITION, DEFAULT_SPEED, DEFAULT_TTS_CONFIG } from "../types"

interface EditorDrawersProps {
  // BGM
  bgmDrawerOpen: boolean
  bgmSettings: BgmMixConfig
  onBgmSettingsChange: (config: BgmMixConfig) => void
  onCloseBgmDrawer: () => void
  // 字幕
  subtitleDrawerOpen: boolean
  subtitleSettings: SubtitleStyleConfig
  onSubtitleSettingsChange: (config: SubtitleStyleConfig) => void
  onCloseSubtitleDrawer: () => void
  // 转场
  transitionDrawerOpen: boolean
  transitionTargetClipId: string | null
  clips: ClipData[]
  onTransitionChange: (config: TransitionConfig) => void
  onCloseTransitionDrawer: () => void
  // 调速
  speedDrawerOpen: boolean
  speedTargetClipId: string | null
  onSpeedChange: (config: SpeedConfig) => void
  onApplySpeedAll: (config: SpeedConfig) => void
  onCloseSpeedDrawer: () => void
  // TTS
  ttsDrawerOpen: boolean
  ttsTargetClipId: string | null
  onTtsChange: (config: TtsConfig) => void
  onCloseTtsDrawer: () => void
  // 水印
  watermarkDrawerOpen: boolean
  watermarkSettings: WatermarkConfig
  onWatermarkChange: (config: WatermarkConfig) => void
  onCloseWatermarkDrawer: () => void
  // 片头片尾
  introOutroDrawerOpen: boolean
  introOutroSettings: IntroOutroConfig
  onIntroOutroChange: (config: IntroOutroConfig) => void
  onCloseIntroOutroDrawer: () => void
  // 混剪
  pipDrawerOpen: boolean
  pipSettings: PipConfig
  totalDuration: number
  onPipChange: (config: PipConfig) => void
  onClosePipDrawer: () => void
  // 滤镜
  filterDrawerOpen: boolean
  filterSettings: FilterConfig
  onFilterChange: (config: FilterConfig) => void
  onCloseFilterDrawer: () => void
  // 绿幕
  chromaKeyDrawerOpen: boolean
  chromaKeySettings: ChromaKeyConfig
  onChromaKeyChange: (config: ChromaKeyConfig) => void
  onCloseChromaKeyDrawer: () => void
  // 贴纸
  stickerDrawerOpen: boolean
  stickerSettings: StickerConfig
  onStickerChange: (config: StickerConfig) => void
  onCloseStickerDrawer: () => void
}

const EditorDrawers: React.FC<EditorDrawersProps> = ({
  bgmDrawerOpen,
  bgmSettings,
  onBgmSettingsChange,
  onCloseBgmDrawer,
  subtitleDrawerOpen,
  subtitleSettings,
  onSubtitleSettingsChange,
  onCloseSubtitleDrawer,
  transitionDrawerOpen,
  transitionTargetClipId,
  clips,
  onTransitionChange,
  onCloseTransitionDrawer,
  speedDrawerOpen,
  speedTargetClipId,
  onSpeedChange,
  onApplySpeedAll,
  onCloseSpeedDrawer,
  ttsDrawerOpen,
  ttsTargetClipId,
  onTtsChange,
  onCloseTtsDrawer,
  watermarkDrawerOpen,
  watermarkSettings,
  onWatermarkChange,
  onCloseWatermarkDrawer,
  introOutroDrawerOpen,
  introOutroSettings,
  onIntroOutroChange,
  onCloseIntroOutroDrawer,
  pipDrawerOpen,
  pipSettings,
  totalDuration,
  onPipChange,
  onClosePipDrawer,
  filterDrawerOpen,
  filterSettings,
  onFilterChange,
  onCloseFilterDrawer,
  chromaKeyDrawerOpen,
  chromaKeySettings,
  onChromaKeyChange,
  onCloseChromaKeyDrawer,
  stickerDrawerOpen,
  stickerSettings,
  onStickerChange,
  onCloseStickerDrawer,
}) => {
  const transitionConfig = transitionTargetClipId
    ? (clips.find((c) => c.id === transitionTargetClipId)?.transition ?? DEFAULT_TRANSITION)
    : DEFAULT_TRANSITION

  const transitionTitle = transitionTargetClipId ? "片段转场设置" : "全局默认转场"

  return (
    <>
      {/* BGM 选择器 Drawer */}
      <BgmSelector
        open={bgmDrawerOpen}
        onClose={onCloseBgmDrawer}
        config={bgmSettings}
        onChange={onBgmSettingsChange}
      />

      {/* 字幕样式配置 Drawer */}
      <SubtitleStylePanel
        open={subtitleDrawerOpen}
        onClose={onCloseSubtitleDrawer}
        config={subtitleSettings}
        onChange={onSubtitleSettingsChange}
      />

      {/* 转场特效选择器 Drawer */}
      <TransitionSelector
        open={transitionDrawerOpen}
        onClose={onCloseTransitionDrawer}
        config={transitionConfig}
        onChange={onTransitionChange}
        title={transitionTitle}
      />

      {/* 片段调速面板 Drawer */}
      {speedTargetClipId && (
        <SpeedPanel
          open={speedDrawerOpen}
          onClose={onCloseSpeedDrawer}
          config={clips.find((c) => c.id === speedTargetClipId)?.speed ?? DEFAULT_SPEED}
          onChange={onSpeedChange}
          onApplyAll={onApplySpeedAll}
        />
      )}

      {/* TTS 配音面板 Drawer */}
      {ttsTargetClipId && (
        <TtsPanel
          open={ttsDrawerOpen}
          onClose={onCloseTtsDrawer}
          config={clips.find((c) => c.id === ttsTargetClipId)?.tts_config ?? DEFAULT_TTS_CONFIG}
          onChange={onTtsChange}
        />
      )}

      {/* 水印配置面板 */}
      <WatermarkPanel
        open={watermarkDrawerOpen}
        onClose={onCloseWatermarkDrawer}
        config={watermarkSettings}
        onChange={onWatermarkChange}
      />

      {/* 片头片尾配置面板 */}
      <IntroOutroPanel
        open={introOutroDrawerOpen}
        onClose={onCloseIntroOutroDrawer}
        config={introOutroSettings}
        onChange={onIntroOutroChange}
      />

      {/* 混剪配置面板 */}
      <PipConfigPanel
        open={pipDrawerOpen}
        onClose={onClosePipDrawer}
        config={pipSettings}
        onChange={onPipChange}
        totalDuration={totalDuration}
      />

      {/* 滤镜调色面板 */}
      <FilterPanel
        open={filterDrawerOpen}
        onClose={onCloseFilterDrawer}
        config={filterSettings}
        onChange={onFilterChange}
      />

      {/* 绿幕抠像面板 */}
      <GreenScreenPanel
        open={chromaKeyDrawerOpen}
        onClose={onCloseChromaKeyDrawer}
        config={chromaKeySettings}
        onChange={onChromaKeyChange}
      />

      {/* 贴纸面板 */}
      <StickerPanel
        open={stickerDrawerOpen}
        onClose={onCloseStickerDrawer}
        config={stickerSettings}
        onChange={onStickerChange}
        totalDuration={totalDuration}
      />
    </>
  )
}

export default EditorDrawers