import React from 'react'

import {
  timeIntervals,
  TimeInterval,
  timeIntervalStringShort,
} from '../types/TimeInterval'
import { Selector } from './Selector'

/*
 * Select one of the time intervals from a set of options
 * https://www.figma.com/file/PKczUvdmkqdqIvKBgmWsqO/Components?node-id=5473%3A6943
 */
export const TimeIntervalSelector: React.FC<{
  selectedTimeInterval: TimeInterval
  onSelectTimeInterval: (timeInterval: TimeInterval) => void
  options?: readonly TimeInterval[]
}> = ({ selectedTimeInterval, onSelectTimeInterval, options }) => {
  return (
    <Selector
      options={options ?? timeIntervals}
      selectedOption={selectedTimeInterval}
      onSelect={onSelectTimeInterval}
      labelExtractor={(timeInterval) => timeIntervalStringShort[timeInterval]}
      keyExtractor={(timeInterval) => timeInterval}
    />
  )
}