import React from 'react'

import { SelectorModal } from '../components/SelectorModal'
import { PlaylistType } from '../graphql/__generated__/sdk'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { Strings } from '../i18n'
import { labelForPlaylistType } from '../playlists'
import { SelectorModalButton } from './SelectorModalButton'

const playlistTypes = Object.values(PlaylistType)

export const PlaylistTypeSelectorModal: React.FC<{
  isOpen: boolean
  playlistType: PlaylistType | null
  setPlaylistType: (playlistType: PlaylistType | null) => void
  setIsOpen: (isOpen: boolean) => void
}> = ({ isOpen, playlistType, setPlaylistType, setIsOpen }) => (
  <SelectorModal<PlaylistType | null>
    title={Strings.Shared.Filters}
    items={[null, ...playlistTypes]}
    renderItem={({ item }) => (
      <SelectorModalButton
        key={item}
        label={labelForPlaylistType(item)}
        isSelected={item === playlistType}
        onPress={() => {
          setPlaylistType(item)
          setIsOpen(false)
          sendAnalyticsEvent(EventType.PLAYLIST_FILTER_SET, {
            playlist_type: item,
            subject: 'user',
            verb: 'filtered',
            object: 'playlists',
          })
        }}
      />
    )}
    keyExtractor={(item) => (item === null ? 'any-playlist-type' : item)}
    modalIsOpen={isOpen}
    setModalIsOpen={setIsOpen}
  />
)