import React from 'react'

import { SelectorModal } from '../components/SelectorModal'
import { Strings } from '../i18n'
import { TimeInterval, timeIntervalStringLong } from '../types/TimeInterval'
import { SelectorModalButton } from './SelectorModalButton'

export const TimeIntervalSelectorModal: React.FC<{
  isOpen: boolean
  timeInterval: TimeInterval
  setTimeInterval: (timeInterval: TimeInterval) => void
  setIsOpen: (isOpen: boolean) => void
  timeIntervals: readonly TimeInterval[]
}> = ({ isOpen, timeInterval, setTimeInterval, setIsOpen, timeIntervals }) => (
  <SelectorModal<TimeInterval>
    title={Strings.Shared.SelectTimeInterval}
    items={[...timeIntervals]}
    renderItem={({ item }) => {
      return (
        <SelectorModalButton
          key={item}
          label={timeIntervalStringLong[item]}
          isSelected={item === timeInterval}
          onPress={() => {
            setTimeInterval(item)
            setIsOpen(false)
            /*
          TODO
          sendAnalyticsEvent(EventType.PLAYLIST_FILTER_SET, {
            playlist_type: item,
            subject: 'user',
            verb: 'filtered',
            object: 'playlists',
          })
          */
          }}
        />
      )
    }}
    keyExtractor={(item) => item}
    modalIsOpen={isOpen}
    setModalIsOpen={setIsOpen}
  />
)