import React from 'react'
import { Text, TouchableOpacity } from 'react-native'
import { colorsV2 } from '../Colors'
import { SelectorModal } from '../components/SelectorModal'
import { Strings } from '../i18n'
import { TextStyles } from '../Styles'
import { AmaPlaylistType, amaPlaylistTypes } from '../types/Playlist'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'

export const PlaylistTypeSelectorModal: React.FC<{
  isOpen: boolean
  playlistType: AmaPlaylistType | null
  setPlaylistType: (playlistType: AmaPlaylistType | null) => void
  setIsOpen: (isOpen: boolean) => void
}> = ({ isOpen, playlistType, setPlaylistType, setIsOpen }) => (
  <SelectorModal<AmaPlaylistType | null>
    title={Strings.Shared.Filters}
    items={[null, ...amaPlaylistTypes]}
    renderItem={({ item }) => {
      return (
        <TouchableOpacity
          onPress={() => {
            setPlaylistType(item)
            setIsOpen(false)
            sendAnalyticsEvent(EventType.PLAYLIST_FILTER_SET, {
              playlist_type: item,
              subject: 'user',
              verb: 'filtered',
              object: 'playlists',
            })
          }}
          key={item}
          style={[
            {
              flexDirection: 'row',
              alignItems: 'center',
              justifyContent: 'space-between',
              height: 48,
              borderWidth: 2,
              borderRadius: 8,
              marginBottom: 8,
              paddingHorizontal: 8,
            },
            item === playlistType
              ? {
                  borderWidth: 2,
                  paddingHorizontal: 8,
                  borderColor: colorsV2.metals.metal1,
                }
              : {
                  backgroundColor: colorsV2.metals.metal2,
                  borderWidth: 0,
                },
          ]}
        >
          <Text
            style={[
              {
                ...TextStyles.body,
                marginVertical: 8,
                color: 'white',
              },
            ]}
          >
            {Strings.PlaylistTypes[item ?? 'all']}
          </Text>
        </TouchableOpacity>
      )
    }}
    keyExtractor={(item) => (item === null ? 'any-playlist-type' : item)}
    modalIsOpen={isOpen}
    setModalIsOpen={setIsOpen}
  />
)