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

const AddProduct = ({route, navigation}) => {
  const {t} = useTranslation();
  const [price, setPrice] = useState('0');
  const {type} = route.params;
  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header
        navigation={navigation}
        smTitle={t(
          type === 'add' ? 'add_new_menu_title' : 'update_new_menu_title',
        )}
      />
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.spacing} />
          <View style={styles.imageUploadSection}>
            <Text style={styles.imageUploadLabel}>
              {t('menu_photo_text')}
              <Text style={{color: Colors.RED}}>*</Text>
            </Text>
            <Text style={styles.imageUploadNote}>{t('menu_photo_note')}</Text>
            <TouchableOpacity activeOpacity={0.5} style={styles.imageUpload}>
              <View style={styles.imageUploadIconWrap}>
                <Icon
                  name="camera"
                  type="Feather"
                  style={styles.imageUploadIcon}
                />
              </View>
              <Text style={styles.imgaeUploadText}>
                {t('upload_image_text')}
              </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.spacing} />
          <View style={styles.spacing} />
          <Input
            type="text"
            required
            label={t('name_text')}
            counter={30}
            placeholder={t('name_food_placeholder')}
          />
          <View style={styles.spacing} />
          <Input
            type="text"
            required
            label={t('description_text')}
            counter={50}
            placeholder={t('description_food_placeholder')}
          />
          <View style={styles.spacing} />
          <Input
            type="currency"
            required
            value={price}
            onChangeValue={val => setPrice(val)}
            label={t('price_text')}
            placeholder="0"
          />
        </ScrollView>
        <Button title="Simpan" onPress={() => navigation.goBack()} />
      </View>
    </Container>
  );
};

export default AddProduct;
