import React from 'react'
import { Text, TouchableOpacity, View } from 'react-native'

import { colors } from '../Colors'
import { TextStyles } from '../Styles'

function BarSelectOption<T>(props: {
  selected: boolean
  value: T
  label: string
  onClick: (value: T) => void
  disabled: boolean
}) {
  return (
    <TouchableOpacity
      style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 36,
        borderRadius: 8,
        backgroundColor: props.selected ? colors.metals.metal2 : 'transparent',
      }}
      onPress={(): void => props.onClick(props.value)}
      disabled={props.disabled}
    >
      <Text
        style={[
          TextStyles.tinyCaps,
          {
            color: props.disabled
              ? colors.metals.metal2
              : props.selected
              ? colors.white
              : colors.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 { item: T; disabled: boolean }[]
}) {
  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.item}
          value={option.item}
          label={props.translateLabel(option.item)}
          disabled={option.disabled}
        />
      ))}
    </View>
  )
}