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

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

export function CharacterLibrarySelector({
  isReplaceLibraryOpen,
  setIsReplaceLibraryOpen,
  onSelect,
  userRoleLibrary = []
}: CharacterLibrarySelectorProps) {
  // 将 RoleEntity[] 转换为图片URL数组
  const imageUrls = userRoleLibrary.map(role => role.imageUrl);

  // 如果没有数据，显示空状态
  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>暂无角色库数据</p>
        </div>
      </FloatingGlassPanel>
    );
  }

  return (
    <FloatingGlassPanel
      open={isReplaceLibraryOpen}
      width='90vw'
      panel_style={{ background: 'unset', border: 'unset', backdropFilter: 'unset', boxShadow: 'none' }}
      onClose={() => setIsReplaceLibraryOpen(false)}
    >
      {/* 内容 */}
      <ImageWave
        images={imageUrls}
        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>
  );
}