import React, {useState} from 'react';
import {View, ScrollView, TextInput} from 'react-native';
import {Container, Header, Note, Button, Input} from 'components';
import {Colors} from 'global-styles';
import {useTranslation} from 'react-i18next';
import styles from './styles';

const BANK = [
  {label: 'Mandiri', value: 1},
  {label: 'Bank Central Asia', value: 2},
  {label: 'Bank Negara Indonesia (BNI)', value: 3},
];

const BankAccount = ({navigation}) => {
  const [categorySelected, setCategorySelected] = useState(null);
  const {t} = useTranslation();

  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header
        navigation={navigation}
        smTitle={t('bank_account_information_title')}
      />
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.spacing} />
          <Input type="text" required label={t('account_holder_name_text')} />
          <View style={styles.spacing} />
          <Input
            type="select"
            required
            label={t('bank_name_text')}
            data={BANK}
            value={categorySelected}
            onChangeValue={val => setCategorySelected(val)}
          />
          <View style={styles.spacing} />
          <Input
            type="text"
            keyboardType="decimal-pad"
            required
            label={t('account_number_text')}
          />
        </ScrollView>
        <Button title={t('save')} onPress={() => navigation.goBack()} />
      </View>
    </Container>
  );
};

export default BankAccount;
