import FloatingGlassPanel from './FloatingGlassPanel';
import { ImageWave } from '@/components/ui/ImageWave';

const imageUrls = [
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-3.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-4.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-1.jpg',
  'https://d3phaj0sisr2ct.cloudfront.net/app/gen4/object-reference/welcome-ref-2.jpg',
];

export function CharacterLibrarySelector({
  isReplaceLibraryOpen,
  setIsReplaceLibraryOpen,
  onSelect,
}: {
  isReplaceLibraryOpen: boolean;
  setIsReplaceLibraryOpen: (open: boolean) => void;
  onSelect: (index: number) => void;
}) {
  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>
  );
}