import React, { useContext } from 'react'
import { Pressable, Text, View, TouchableOpacity } from 'react-native'
import { colors, colorsV2 } from '../Colors'
import { TrackWithStreamsByDspAndDate } from '../types/types'
import { HeaderNav } from '../components/HeaderNav'
import { TextStyles, TextStylesV2 } from '../Styles'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { ScreenNames } from '../constants/ScreenNames'
import { ReactNavigationProps } from '../Navigation'
import { Strings } from '../i18n'
import { ScrollView } from 'react-native-gesture-handler'
import { SearchIcon } from '../icons/SearchIcon'
import { MusicNoteSmall } from '../icons/MusicNoteSmall'
import { FontAwesome5 } from '@expo/vector-icons'
import { Mode } from '../types/helpers'
import Video from '../icons/Play'
import { Stack } from '../icons/Stack'
import { LibraryArtistStreams } from '../components/LibraryArtistStreams'
import { ArtistImage } from '../components/ArtistImage'
import { UserContext } from '../contexts/UserContext'
import FilterChevron from '../icons/FilterChevron'

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.midGray,
          margin: 4,
          padding: 24,
          borderRadius: 8,
        }}
      >
        {icon}
        <Text style={{ ...TextStyles.body, color: colors.white, 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',
        marginHorizontal: 4,
        marginTop: 32,
        marginBottom: 16,
      }}
    >
      <Text style={[TextStylesV2.body, { color: colorsV2.white }]}>
        {title}
      </Text>
      <TouchableOpacity onPress={onPressViewAll}>
        <Text style={[TextStylesV2.body]}>{Strings.Shared.ViewAll}</Text>
      </TouchableOpacity>
    </View>
    <View
      style={{
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap',
      }}
    >
      {children}
    </View>
  </View>
)

export const LibraryScreen: React.FC<
  ReactNavigationProps<ScreenNames.Library>
> = ({ navigation }) => {
  const user = useContext(UserContext)
  const artist = user.lastUsedArtist

  return (
    <CommonScreenContainer>
      <View
        style={{
          paddingHorizontal: 16,
          alignItems: 'flex-end',
        }}
      ></View>
      <ScrollView contentContainerStyle={{ padding: 16 }} style={{ flex: 1 }}>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <TouchableOpacity
            style={{
              flexDirection: 'row',
              alignItems: 'center',
            }}
            onPress={() => user.setLastUsedArtistId(null)}
          >
            <ArtistImage
              artist={artist}
              size={48}
              style={{
                borderWidth: 2,
                borderColor: colors.gray,
              }}
            />
            <FilterChevron style={{ marginLeft: 16 }} />
          </TouchableOpacity>
          <Pressable
            onPress={() => {
              navigation.navigate('Search')
            }}
            style={{
              padding: 8,
            }}
          >
            <SearchIcon
              size={22}
              stroke={colors.white}
              flipHorizontal
              style={{}}
            />
          </Pressable>
        </View>
        <LibraryArtistStreams />
        <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.lightGray} />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.FAVORITES,
              })
            }
          />
          <Tile
            label={Strings.Shared.TopTrending}
            icon={
              <MusicNoteSmall
                stroke={colors.lightGray}
                style={{ marginLeft: -2 }}
              />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.TRENDING,
              })
            }
          />
          <Tile
            label={Strings.Shared.NewestReleases}
            icon={
              <MusicNoteSmall
                stroke={colors.lightGray}
                style={{ marginLeft: -2 }}
              />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.RELEASE,
              })
            }
          />
          <Tile
            label={Strings.Shared.MostStreamed}
            icon={
              <MusicNoteSmall
                stroke={colors.lightGray}
                style={{ marginLeft: -2 }}
              />
            }
            onPress={() =>
              navigation.navigate('Tracks', {
                mode: Mode.STREAMS,
              })
            }
          />
        </LibraryTileSection>
        {/* FIXME: Hidden until albums section is ready to be released
        <LibraryTileSection
          title={Strings.ProductScreen.AlbumsEPsAndLPs}
          onPressViewAll={() =>
            navigation.navigate('Products', {
              mode: Mode.ALL,
            })
          }
        >
          <Tile
            label={Strings.Shared.NewestReleases}
            icon={<Stack stroke={colors.lightGray} />}
            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.lightGray} 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.lightGray} style={{ marginLeft: -2 }} />
            }
            onPress={() =>
              navigation.navigate('Videos', {
                mode: 'views',
              })
            }
          />
          */}
        </LibraryTileSection>
      </ScrollView>
    </CommonScreenContainer>
  )
}