import React from 'react'
import { Linking, Text, TouchableOpacity, View } from 'react-native'
import { colors } from '../Colors'
import { CachedImageWithFallback } from '../components/CachedImageWithFallback'
import { PositionChangeAndArrow } from '../components/PositionChangeAndArrow'
import { TextStyles } from '../Styles'
import {
  PlaylistTrackPosition,
  PlaylistTrackPositionWithCurrentStreams,
} from '../types/types'
import { formatCountShort, playlistUrl } from '../util'

const imageSize = 64

/**
 *
 * Current track position on playlist and change from previous position
 */
export const PlaylistPositionAndChange: React.FC<{
  playlistTrackPosition: PlaylistTrackPosition
}> = ({ playlistTrackPosition }) => (
  <View
    style={{
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-end',
    }}
  >
    {playlistTrackPosition.current != null &&
      playlistTrackPosition.previous != null && (
        <PositionChangeAndArrow
          currentValue={playlistTrackPosition.current}
          previousValue={playlistTrackPosition.previous}
          invertDirection
        />
      )}
    <Text
      style={{
        ...TextStyles.body,
        minWidth: 52,
        textAlign: 'right',
        color: colors.white,
      }}
    >
      {playlistTrackPosition.current && `#${playlistTrackPosition.current}`}
    </Text>
  </View>
)

export const TrackPlaylist: React.FC<{
  playlist: PlaylistTrackPositionWithCurrentStreams
}> = ({ playlist }) => (
  <TouchableOpacity
    onPress={() => {
      const url = playlistUrl(playlist.item.playlist)
      if (url) {
        Linking.openURL(url)
      }
    }}
  >
    <View
      style={{
        flexDirection: 'row',
        marginBottom: 16,
        flex: 1,
        maxHeight: imageSize,
      }}
    >
      <CachedImageWithFallback
        key={playlist.item.playlist.image?.uri}
        uris={
          playlist.item.playlist.image?.uri
            ? [playlist.item.playlist.image.uri]
            : []
        }
        cacheKey={playlist.item.playlist.sonyPlaylistId}
        gradientString={playlist.item.playlist.name}
        style={{
          backgroundColor: colors.gray,
          borderRadius: 8,
          marginRight: 18,
          aspectRatio: 1,
          height: imageSize,
          width: 'auto',
        }}
      />
      <View
        style={{
          flexDirection: 'column',
          flex: 1,
          justifyContent: 'space-evenly',
        }}
      >
        <View style={{ flex: 1 }}>
          <Text
            ellipsizeMode="tail"
            numberOfLines={1}
            style={[TextStyles.bodyHeader, { color: colors.white, flex: 1 }]}
          >
            {playlist.item.playlist.name}
          </Text>

          <View
            style={{
              flex: 1,
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
            }}
          >
            <View>
              <Text style={{ ...TextStyles.body, color: colors.lightGray }}>
                {formatCountShort(playlist.data)}
              </Text>
            </View>
            {
              // Don't display playlist position and position change for algorithmic playlists. Playlist position and change for algorithmic playlists is a side effect of how they are obtained, and shouldn't be defined in the source data
              playlist.item.playlist.playlistType !== 'algorithmic' && (
                <PlaylistPositionAndChange
                  playlistTrackPosition={playlist.item}
                />
              )
            }
          </View>
        </View>
      </View>
    </View>
  </TouchableOpacity>
)