import React from 'react'
import { Text, TouchableOpacity, View } from 'react-native'
import { colorsV2 } from '../Colors'
import { TextStylesV2 } from '../Styles'

function BarSelectOption<T>(props: {
  selected: boolean
  value: T
  label: string
  onClick: (value: T) => void
}) {
  return (
    <TouchableOpacity
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 36,
        borderRadius: 8,
        backgroundColor: props.selected
          ? colorsV2.metals.metal2
          : 'transparent',
      }}
      onPress={() => void props.onClick(props.value)}
    >
      <Text
        style={[
          TextStylesV2.tinyCaps,
          {
            color: props.selected ? colorsV2.white : colorsV2.metals.metal1,
            textTransform: 'uppercase',
          },
        ]}
      >
        {props.label}
      </Text>
    </TouchableOpacity>
  )
}

export function BarSelect<T>(props: {
  value: T
  onChange: (order: T) => void
  translateLabel: (value: T) => string
  options: readonly T[]
}) {
  return (
    <View
      style={{
        flexDirection: 'row',
        justifyContent: 'center',
        borderRadius: 8,
        marginTop: 12,
        marginBottom: 8,
      }}
    >
      {props.options.map((option, index) => (
        <BarSelectOption<T>
          key={index}
          onClick={props.onChange}
          selected={props.value === option}
          value={option}
          label={props.translateLabel(option)}
        />
      ))}
    </View>
  )
}