import {Chip} from '@/components/chip'
import {Carousel} from '@/components/ui/carousel'
import {type MapFilter} from '@/lib/map'
import {type ViewStyleProp} from '@/sprinkles'
import {type TagCount} from '@/stores/tags'

const MAX_TAG_CHIPS = 5

export const MapFilterChips = ({
  filter,
  onChange,
  tags,
  style,
}: {
  filter: MapFilter
  onChange: (filter: MapFilter) => void
  tags: TagCount[]
  style?: ViewStyleProp
}) => (
  <Carousel snap={false} bleed={false} style={style}>
    <Chip
      label="All"
      selected={filter.kind === 'all'}
      onPress={() => onChange({kind: 'all'})}
    />
    <Chip
      label="Coming up"
      selected={
        filter.kind === 'status' && filter.status === 'planned'
      }
      onPress={() => onChange({kind: 'status', status: 'planned'})}
    />
    <Chip
      label="Done"
      selected={filter.kind === 'status' && filter.status === 'done'}
      onPress={() => onChange({kind: 'status', status: 'done'})}
    />
    {tags.slice(0, MAX_TAG_CHIPS).map((tag) => (
      <Chip
        key={tag.name}
        label={`${tag.emoji} ${tag.name}`}
        selected={filter.kind === 'tag' && filter.tag === tag.name}
        onPress={() => onChange({kind: 'tag', tag: tag.name})}
      />
    ))}
  </Carousel>
)
