import React from 'react';

import {
  AudioFileRenderer,
  ClipRenderer,
  LyricsRenderer,
  PersonaRenderer,
  PlaylistRenderer,
  StylesRenderer,
} from './ReferenceRenderers';
import { Reference, ReferenceType } from './ReferenceTypes';

interface ChatInputBarReferencesProps {
  references: Reference[];
  onRemoveReference: (referenceId: string) => void;
}

export const ChatInputBarReferences: React.FC<ChatInputBarReferencesProps> = ({
  references,
  onRemoveReference,
}) => {
  const renderReference = (reference: Reference) => {
    const handleRemove = () => onRemoveReference(reference.id);

    switch (reference.type) {
      case ReferenceType.CLIP:
        return (
          <div key={reference.id} className='pr-4 pl-2'>
            <ClipRenderer {...reference} onRemove={handleRemove} />
          </div>
        );

      case ReferenceType.LYRICS:
        return (
          <div key={reference.id} className='px-4'>
            <LyricsRenderer {...reference} onRemove={handleRemove} />
          </div>
        );

      case ReferenceType.STYLES:
        return (
          <div key={reference.id} className='px-4'>
            <StylesRenderer {...reference} onRemove={handleRemove} />
          </div>
        );

      case ReferenceType.PLAYLIST:
        return (
          <div key={reference.id} className='px-2'>
            <PlaylistRenderer {...reference} onRemove={handleRemove} />
          </div>
        );

      case ReferenceType.PERSONA:
        return (
          <div key={reference.id} className='px-2'>
            <PersonaRenderer {...reference} onRemove={handleRemove} />
          </div>
        );

      case ReferenceType.AUDIO_FILE:
        return (
          <div key={reference.id} className='pr-4 pl-2'>
            <AudioFileRenderer {...reference} onRemove={handleRemove} />
          </div>
        );

      default:
        return null;
    }
  };

  if (references.length === 0) {
    return null;
  }

  return (
    <div className='flex flex-col gap-2 rounded-lg bg-white/[0.04]'>
      {references.map(renderReference)}
    </div>
  );
};