import React from 'react'
import { View, TouchableOpacity, Text } from 'react-native'
import { useSelector } from 'react-redux'
import styles from './styles'
import { useValues } from '../../../../../utils/context'
import { useTheme } from '@react-navigation/native'
import appColors from '../../../../../theme/appColors'
import { windowHeight } from '../../../../../theme/appConstant'

export function Selection({ activeTab, onButtonPress }: any) {
  const { translateData } = useSelector((state: any) => state.setting)
  const { viewRtlStyle, isDark } = useValues()
  const { colors } = useTheme()

  return (
    <View style={[styles.selection, { flexDirection: viewRtlStyle }]}>
      <View style={styles.container}>
        <TouchableOpacity
          style={[
            styles.tab,
            styles.leftTab,
            {
              backgroundColor:
                activeTab === 'wallet'
                  ? isDark
                    ? appColors.white
                    : appColors.black
                  : isDark
                  ? appColors.secondaryDark
                  : appColors.white,
            },
          ]}
          onPress={() => onButtonPress('wallet')}
          activeOpacity={0.7}
        >
          <Text
            style={{
              color:
                activeTab === 'wallet'
                  ? isDark
                    ? appColors.black
                    : appColors.white
                  : isDark
                  ? appColors.white
                  : appColors.black,
              height: windowHeight(2.35),
            }}
          >
            {translateData.totalEarning}
          </Text>
        </TouchableOpacity>

        <TouchableOpacity
          style={[
            styles.tab,
            styles.rightTab,
            {
              backgroundColor:
                activeTab === 'withdraw'
                  ? isDark
                    ? appColors.white
                    : appColors.black
                  : isDark
                  ? appColors.secondaryDark
                  : appColors.white,
            },
          ]}
          onPress={() => onButtonPress('withdraw')}
          activeOpacity={0.7}
        >
          <Text
            style={{
              color:
                activeTab === 'withdraw'
                  ? isDark
                    ? appColors.black
                    : appColors.white
                  : isDark
                  ? appColors.white
                  : appColors.black,
              height: windowHeight(2.35),
            }}
          >
            {translateData.withdrawHistory}
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}
