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

const AddMenuCategory = ({route, navigation}) => {
  const {t} = useTranslation();
  const [category, setCategory] = useState('');
  const {type} = route.params;
  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header
        navigation={navigation}
        smTitle={t(
          type === 'add' ? 'add_category_title' : 'update_category_title',
        )}
      />
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.spacing} />
          <Input
            type="text"
            keyboardType="decimal-pad"
            required
            counter={30}
            label={t('category_name_text')}
            value={category}
            onChangeText={val => setCategory(val)}
          />
        </ScrollView>
        <Button title="Simpan" onPress={() => navigation.goBack()} />
      </View>
    </Container>
  );
};

export default AddMenuCategory;
