import { storiesOf } from '@storybook/react-native'
import { times } from 'lodash'

import { TrackList, TrackListItem } from '../../src/components/TrackList'
import { DateListItem } from '../../src/components/listitems/DateListItem'
import { Product } from '../../src/types/Product'
import { Track } from '../../src/types/Track'
import { trackItemFieldsFromTrack } from '../../src/types/graphqlCompatibilityHelpers'

const product: Product = {
  name: 'Product Name',
  image: {
    uri: '',
    width: 0,
    height: 0,
  },
  releaseDate: '2022-03-10',
  productId: '',
  digitalTitleSuppl: null,
  labelId: null,
  labelName: null,
  productVersion: null,
  subTitle: null,
  configKey: '',
  isExplicit: false,
}

const generateTrack = (idx: number): Track => ({
  sonyTrackId: `GRAS_${idx}`,
  isrc: `GRAS_${idx}A`,
  trackNameSuppl: 'Track Name Suppl',
  name: `Track Name ${idx}`,
  product,
  isFavorite: false,
  lyricsVersion: 'lyrics',
  releaseDate: null,
})

const trackslistItems: TrackListItem[] = times(10, (idx) => {
  const nextId = idx + 1
  return {
    track: generateTrack(nextId),
    currentPeriodStreams: 1000 * nextId,
  }
})

storiesOf('TrackList', module).add('date list items', () => (
  <TrackList
    tracks={trackslistItems}
    renderTrack={({ track }) => (
      <DateListItem track={trackItemFieldsFromTrack(track)} />
    )}
  />
))