import React from 'react'
import { Text, TouchableOpacity } from 'react-native'
import { colorsV2 } from '../Colors'
import { SelectorModal } from '../components/SelectorModal'
import { timeIntervalOptions } from '../contexts/TimeIntervalContext'
import { Strings } from '../i18n'
import { TextStyles } from '../Styles'
import { TimeInterval } from '../types/TimeInterval'

export const TimeIntervalSelectorModal: React.FC<{
  isOpen: boolean
  timeInterval: TimeInterval
  setTimeInterval: (timeInterval: TimeInterval) => void
  setIsOpen: (isOpen: boolean) => void
}> = ({ isOpen, timeInterval, setTimeInterval, setIsOpen }) => (
  <SelectorModal<TimeInterval>
    title={Strings.Shared.SelectTimeInterval}
    items={timeIntervalOptions.map(({ value }) => value)}
    renderItem={({ item }) => {
      return (
        <TouchableOpacity
          onPress={() => {
            setTimeInterval(item)
            setIsOpen(false)
            /*
            TODO
            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 === timeInterval
              ? {
                  borderWidth: 2,
                  paddingHorizontal: 8,
                  borderColor: colorsV2.metals.metal1,
                }
              : {
                  backgroundColor: colorsV2.metals.metal2,
                  borderWidth: 0,
                },
          ]}
        >
          <Text
            style={[
              {
                ...TextStyles.body,
                marginVertical: 8,
                color: 'white',
              },
            ]}
          >
            {timeIntervalOptions.find(({ value }) => value === item)?.label}
          </Text>
        </TouchableOpacity>
      )
    }}
    keyExtractor={(item) => item}
    modalIsOpen={isOpen}
    setModalIsOpen={setIsOpen}
  />
)