import React from 'react'
import { View, StyleProp, ViewStyle } from 'react-native'

import Amazon from '../icons/Amazon'
import Apple from '../icons/Apple'
import DspGlobe from '../icons/DspGlobe'
import Spotify from '../icons/Spotify'
import Youtube from '../icons/Youtube'

interface Props {
  dspSlug: string
  style?: StyleProp<ViewStyle>
  width?: number
  height?: number
  fill?: string
}

type IconProps = Omit<Props, 'style'>
const Icon: React.FC<IconProps> = ({ dspSlug, ...iconProps }) => {
  switch (dspSlug) {
    case 'all':
      return <DspGlobe {...iconProps} />
    case 'apple':
      return <Apple {...iconProps} />
    case 'spotify':
      return <Spotify {...iconProps} />
    case 'amazon':
      return <Amazon {...iconProps} />
    case 'youtube':
      return <Youtube {...iconProps} />
    default:
      // TODO: fallback icon?
      return <View {...iconProps} />
  }
}

export const DspIcon: React.FC<Props> = ({ dspSlug, style, ...iconProps }) => {
  return (
    <View style={style}>
      <Icon dspSlug={dspSlug} {...iconProps} />
    </View>
  )
}