video-flow-b/components/ui/character-library-selector.tsx

import FloatingGlassPanel from './FloatingGlassPanel';
import { ImageWave } from '@/components/ui/ImageWave';
import { RoleEntity } from '@/app/service/domain/Entities';

interface CharacterLibrarySelectorProps {
  isLoading: boolean;
  isReplaceLibraryOpen: boolean;
  setIsReplaceLibraryOpen: (open: boolean) => void;
  onSelect: (index: number) => void;
  /** 用户角色库数据 */
  userRoleLibrary: RoleEntity[];
}

export function CharacterLibrarySelector({
  isLoading,
  isReplaceLibraryOpen,
  setIsReplaceLibraryOpen,
  onSelect,
  userRoleLibrary = []
}: CharacterLibrarySelectorProps) {

  if (isLoading) {
    return (
      <FloatingGlassPanel
        open={isReplaceLibraryOpen}
        width='90vw'
        panel_style={{ background: 'unset', border: 'unset', backdropFilter: 'unset', boxShadow: 'none' }}
        onClose={() => setIsReplaceLibraryOpen(false)}
      >
        <div className="flex flex-col items-center justify-center w-full h-64 text-white/50">
          <div className="w-12 h-12 mb-4 animate-spin rounded-full border-b-2 border-blue-600" />
          <p>Loading...</p>
        </div>
      </FloatingGlassPanel>
    );
  }

  // 如果没有数据，显示空状态
  if (userRoleLibrary.length === 0) {
    return (
      <FloatingGlassPanel
        open={isReplaceLibraryOpen}
        width='90vw'
        panel_style={{ background: 'unset', border: 'unset', backdropFilter: 'unset', boxShadow: 'none' }}
        onClose={() => setIsReplaceLibraryOpen(false)}
      >
        <div className="flex items-center justify-center h-64 text-white/50">
          <p>No character library data</p>
        </div>
      </FloatingGlassPanel>
    );
  }

  return (
    <FloatingGlassPanel
      open={isReplaceLibraryOpen}
      width='90vw'
      panel_style={{ background: 'unset', border: 'unset', backdropFilter: 'unset', boxShadow: 'none' }}
      onClose={() => setIsReplaceLibraryOpen(false)}
    >
      {/* 内容 */}
      <ImageWave
        images={userRoleLibrary.map(role => role.imageUrl)}
        containerWidth="90vw"
        containerHeight="calc(var(--index) * 15)"
        itemWidth="calc(var(--index) * 2)"
        itemHeight="calc(var(--index) * 12)"
        gap="0.1rem"
        autoAnimate={true}
        autoAnimateInterval={100}
        onClick={(index) => {
          onSelect(index);
        }}
      />
    </FloatingGlassPanel>
  );
}