import React from 'react'

import { SelectorModal } from '../components/SelectorModal'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { Strings } from '../i18n'
import { PlaylistListMode } from '../screens/TrackPlaylistsScreen'
import { SelectorModalButton } from './SelectorModalButton'

export const PlaylistListModeSelectorModal: React.FC<{
  options: PlaylistListMode[]
  isOpen: boolean
  playlistListMode: PlaylistListMode
  setPlaylistListMode: (playlistListMode: PlaylistListMode) => void
  setIsOpen: (isOpen: boolean) => void
}> = ({
  options,
  isOpen,
  playlistListMode,
  setPlaylistListMode,
  setIsOpen,
}) => (
  <SelectorModal<PlaylistListMode>
    title={Strings.Shared.Status}
    items={options}
    renderItem={({ item }) => (
      <SelectorModalButton
        key={item}
        label={Strings.PlaylistListMode[item].Long}
        isSelected={item === playlistListMode}
        onPress={() => {
          setPlaylistListMode(item)
          setIsOpen(false)

          sendAnalyticsEvent(EventType.PLAYLIST_LIST_MODE_SET, {
            playlist_list_mode: item,
            subject: 'user',
            verb: 'filtered',
            object: 'playlists',
          })
        }}
      />
    )}
    keyExtractor={(item) => item}
    modalIsOpen={isOpen}
    setModalIsOpen={setIsOpen}
  />
)