import React, { useMemo } from 'react';
import JKSessionAudioInputs from './JKSessionAudioInputs';
import { getInstrumentIcon45 } from '../../helpers/utils';

const JKSessionJamTrackStems = ({ jamTrackStems, mixerHelper }) => {
  const stemTracks = useMemo(() => {
    if (!jamTrackStems || jamTrackStems.length === 0) return [];

    return jamTrackStems.map((stem, index) => {
      // Create a track object similar to what JKSessionRemoteTracks creates
      const track = {
        // Use stem properties
        id: stem.id,
        part: stem.part,
        instrument: stem.instrument,
        track_type: stem.track_type,
        position: stem.position,
        // Add client_track_id for compatibility
        client_track_id: `jamtrack-stem-${stem.id}`,
        // Mock some properties that JKSessionMyTrack expects
        instrument_name: stem.part || stem.instrument
      };

      // Create mixer data (placeholder for now)
      const mixerData = {
        mixer: null, // No actual mixer for jam track stems yet
        hasMixer: false
      };

      const instrumentIcon = getInstrumentIcon45(stem.instrument) || '/assets/content/icon_instrument_guitar45.png';
      const trackName = stem.part || stem.instrument || `Stem ${index + 1}`;

      return {
        track,
        mixerFinder: [`jamtrack-stem-${stem.id}`, track, false],
        mixers: mixerData,
        hasMixer: false,
        name: 'JamTrack',
        trackName,
        instrumentIcon,
        photoUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDUiIGhlaWdodD0iNDUiIHZpZXdCb3g9IjAgMCA0NSA0NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQ1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8L3N2Zz4=', // Transparent placeholder to maintain height
        clientId: `jamtrack-stem-${stem.id}`,
        connStatsClientId: `jamtrack-stem-${stem.id}`,
        // Additional properties for JKSessionMyTrack
        isJamTrackStem: true,
        hideAvatar: true // Custom prop to hide avatar
      };
    });
  }, [jamTrackStems]);

  if (!stemTracks || stemTracks.length === 0) {
    return null;
  }

  return (
    <div className='d-flex' style={{ gap: '1rem' }}>
      {stemTracks.map((track, index) => (
        <JKSessionAudioInputs
          key={`stem-${track.track.id || index}`}
          myTracks={[track]} // Each stem gets its own JKSessionAudioInputs
          chat={null}
          mixerHelper={mixerHelper}
          isRemote={true} // Treat as remote since they're not user tracks
        />
      ))}
    </div>
  );
};

export default JKSessionJamTrackStems;
