import React from 'react';
import { titleize } from '../../helpers/utils';

const JKProfilePerformanceSamples = ({samples}) => {
  const SAMPLE_TYPES = {
    JAMKAZAM: { description: 'jamkazam' },
    SOUNDCLOUD: { description: 'soundcloud' },
    YOUTUBE: { description: 'youtube' }
  };

  const jamkasamSamples = samples.filter(sample => sample.claimed_recording && sample.service_type === SAMPLE_TYPES.JAMKAZAM.description);

  const soundCloudSamples = samples.filter(sample => sample.claimed_recording && sample.service_type === SAMPLE_TYPES.SOUNDCLOUD.description);

  const youTubeSamples = samples.filter(sample => sample.claimed_recording && sample.service_type === SAMPLE_TYPES.YOUTUBE.description);

  return (
    <div>
      <strong>Jamkazam : </strong>
      {jamkasamSamples.map(sample => (
        <a href={`/recordings/${sample.claimed_recording.id}`}>{titleize(sample.claimed_recording.name)}</a>
      ))}
      <br />
      <strong>SoundCloud: </strong>
      {soundCloudSamples.map(sample => (
        <a href={`${sample.claimed_recording.id}`}>{titleize(sample.claimed_recording.name)}</a>
      ))}
      <br />
      <strong>Youtube : </strong>
      {youTubeSamples.map(sample => (
        <a href={`${sample.claimed_recording.id}`}>{titleize(sample.claimed_recording.name)}</a>
      ))}
    </div>
  );
};

export default JKProfilePerformanceSamples;
