import { Image as ExpoImage } from 'expo-image'
import React from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { img } from '../assets'
import { FONT_FAMILY } from '../styles/Fonts'

const MusiclandPlaybackCover = ({
  artistName,
  profilePictureURL,
  coverUrl,
  style,
}) => {
  const displayName =
    typeof artistName === 'string' && artistName.trim() ? artistName.trim() : 'MusicLand'

  return (
    <View style={[styles.container, style]}>
      <ExpoImage
        source={coverUrl ? { uri: coverUrl } : img.musiclandPlaybackCover}
        contentFit="cover"
        cachePolicy="memory-disk"
        priority="high"
        style={StyleSheet.absoluteFillObject}
      />
      {!coverUrl && profilePictureURL ? (
        <ExpoImage
          source={{ uri: profilePictureURL }}
          contentFit="cover"
          cachePolicy="memory-disk"
          style={styles.profilePicture}
        />
      ) : null}
      {!coverUrl ? (
        <>
          <Text
            adjustsFontSizeToFit
            minimumFontScale={0.55}
            numberOfLines={1}
            style={styles.artistName}
          >
            {displayName}
          </Text>
          <Text style={styles.playbacker}>PLAYBACKER</Text>
        </>
      ) : null}
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    aspectRatio: 1,
    borderRadius: 20,
    overflow: 'hidden',
    position: 'relative',
  },
  profilePicture: {
    position: 'absolute',
    width: '31.25%',
    aspectRatio: 1,
    left: '34.375%',
    top: '39.84375%',
    borderRadius: 999,
  },
  artistName: {
    position: 'absolute',
    top: '76.5%',
    left: '16%',
    width: '68%',
    color: '#FFFFFF',
    fontFamily: FONT_FAMILY.InterRegular,
    fontSize: 21,
    lineHeight: 26,
    letterSpacing: 1.2,
    textAlign: 'center',
  },
  playbacker: {
    position: 'absolute',
    bottom: '3%',
    left: '10%',
    width: '80%',
    color: '#FFFFFF',
    fontFamily: FONT_FAMILY.InterRegular,
    fontSize: 20,
    lineHeight: 25,
    letterSpacing: 1.4,
    textAlign: 'center',
  },
})

export default React.memo(MusiclandPlaybackCover)