import { FontAwesome5 } from '@expo/vector-icons'
import React from 'react'
import { Pressable, Text, View, TouchableOpacity } from 'react-native'
import { ScrollView } from 'react-native-gesture-handler'

import { colors } from '../Colors'
import { ReactNavigationProps } from '../Navigation'
import { EntityScreenStyles, TextStyles } from '../Styles'
import { ArtistHeader } from '../components/ArtistHeader'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { ScreenNames } from '../constants/ScreenNames'
import { Strings } from '../i18n'
import { MusicNoteSmall } from '../icons/MusicNoteSmall'
import Video from '../icons/Play'
import { Stack } from '../icons/Stack'
import TikTok from '../icons/TikTok'
import { Mode } from '../types/helpers'
import { TrackWithStreamsByDspAndDate } from '../types/types'

const screenName = 'Library Screen'

export interface TracksScreenResponse {
  tracks: TrackWithStreamsByDspAndDate[]
}

const Tile: React.FC<{
  label: string
  icon: React.ReactNode
  onPress?: () => void
}> = ({ label, icon, onPress }) => {
  return (
    <Pressable
      style={({ pressed }) => ({
        height: 188,
        flexBasis: '50%',
        opacity: pressed ? 0.2 : 1.0,
      })}
      onPress={onPress}
    >
      <View
        style={{
          flex: 1,
          backgroundColor: colors.metals.metal2,
          margin: 4,
          padding: 24,
          borderRadius: 8,
          marginVertical: 4,
        }}
      >
        {icon}
        <Text
          style={{ ...TextStyles.body, color: colors.midWhite, marginTop: 8 }}
        >
          {label}
        </Text>
      </View>
    </Pressable>
  )
}

/**
 * A section that groups multiple Tiles together
 */
const LibraryTileSection: React.FC<{
  title: string
  onPressViewAll: () => void
}> = ({ title, onPressViewAll, children }) => (
  <View style={{ flex: 1 }}>
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginVertical: 16,
      }}
    >
      <Text style={[TextStyles.body, { color: colors.white }]}>{title}</Text>
      <TouchableOpacity onPress={onPressViewAll}>
        <Text style={[TextStyles.body]}>{Strings.Shared.ViewAll}</Text>
      </TouchableOpacity>
    </View>
    <View
      style={{
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
        marginHorizontal: -4,
      }}
    >
      {children}
    </View>
  </View>
)

export const LibraryScreen: React.FC<
  ReactNavigationProps<ScreenNames.Library>
> = ({ navigation }) => {
  return (
    <CommonScreenContainer screenName={screenName}>
      <ArtistHeader
        onPressSearchButton={() => navigation.navigate(ScreenNames.Search)}
      />
      <ScrollView
        style={EntityScreenStyles.container}
        showsVerticalScrollIndicator={false}
      >
        <LibraryTileSection
          title={Strings.Shared.Tracks}
          onPressViewAll={() =>
            navigation.navigate('Tracks', {
              mode: Mode.ALL,
            })
          }
        >
          <Tile
            label={Strings.Shared.Favorites}
            icon={
              <FontAwesome5
                name="heart"
                size={20}
                color={colors.metals.metal0}
              />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.FAVORITES,
              })
            }
          />
          <Tile
            label={Strings.Shared.TopTrending}
            icon={
              <MusicNoteSmall
                stroke={colors.metals.metal0}
                style={{ marginLeft: -2 }}
              />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.TRENDING,
              })
            }
          />
          <Tile
            label={Strings.Shared.TikTokTopTrending}
            icon={
              <TikTok
                stroke={colors.metals.metal0}
                fill={colors.metals.metal0}
                style={{ marginLeft: -2 }}
              />
            }
            onPress={() =>
              navigation.navigate('TrackList', {
                mode: 'tiktokCreationsChange',
              })
            }
          />
          <Tile
            label={Strings.Shared.NewestReleases}
            icon={
              <MusicNoteSmall
                stroke={colors.metals.metal0}
                style={{ marginLeft: -2 }}
              />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.RELEASE,
              })
            }
          />
          <Tile
            label={Strings.Shared.MostStreamed}
            icon={
              <MusicNoteSmall
                stroke={colors.metals.metal0}
                style={{ marginLeft: -2 }}
              />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.STREAMS,
              })
            }
          />
        </LibraryTileSection>
        <LibraryTileSection
          title={Strings.ProductScreen.AlbumsEPsAndLPs}
          onPressViewAll={() =>
            navigation.navigate('Products', {
              mode: Mode.ALL,
            })
          }
        >
          <Tile
            label={Strings.Shared.NewestReleases}
            icon={<Stack stroke={colors.metals.metal0} />}
            onPress={() =>
              navigation.navigate('Products', {
                mode: Mode.RELEASE,
              })
            }
          />
        </LibraryTileSection>
        <LibraryTileSection
          title={Strings.Shared.Videos}
          onPressViewAll={() =>
            navigation.navigate('Videos', {
              mode: 'all',
            })
          }
        >
          <Tile
            label={Strings.Shared.LatestUploads}
            icon={
              <Video stroke={colors.metals.metal0} style={{ marginLeft: -2 }} />
            }
            onPress={() =>
              navigation.navigate('Videos', {
                mode: 'upload',
              })
            }
          />
          {/* All time views are hidden until delphi problem is resolved          
          <Tile
            label={Strings.Shared.MostViewed}
            icon={
              <Video stroke={colors.metals.metal0} style={{ marginLeft: -2 }} />
            }
            onPress={() =>
              navigation.navigate('Videos', {
                mode: 'views',
              })
            }
          />
          */}
        </LibraryTileSection>
      </ScrollView>
    </CommonScreenContainer>
  )
}