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 BUSINESS_CATEGORY = [
  {label: 'Makanan dan Minuman', value: 1},
  {label: 'Kuliner Kue Tradisional', value: 2},
  {label: 'Gorengan', value: 3},
  {label: 'Street Food', value: 4},
  {label: 'Aneka Keripik', value: 5},
  {label: 'Minuman Dingin Kekinian', value: 6},
];

const BusinessSummary = ({navigation}) => {
  const [categorySelected, setCategorySelected] = useState(null);
  const [currency, setCurrency] = useState({
    average_daily: null,
    average_monthly: null,
  });
  const {t} = useTranslation();

  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header navigation={navigation} smTitle={t('business_summary_title')} />
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.infoSection}>
            <Note message="Mohon masukkan informasi yang benar agar memudahkan saat verifikasi." />
          </View>
          <Input
            type="text"
            required
            placeholder="Cth: Toko Kue ABC, Pasaraya Blok M."
            label={t('business_name_text')}
            note={t('business_name_note')}
          />
          <View style={styles.spacing} />
          <Input
            type="select"
            required
            placeholder="Makanan dan Minuman"
            label={t('business_category_text')}
            data={BUSINESS_CATEGORY}
            value={categorySelected}
            searchable
            onChangeValue={val => setCategorySelected(val)}
          />
          <View style={styles.spacing} />
          <Input
            type="currency"
            required
            value={currency.average_daily}
            onChangeValue={val =>
              setCurrency({...currency, average_daily: val})
            }
            placeholder="1.000.000"
            label={t('average_daily_sales')}
          />
          <View style={styles.spacing} />
          <Input
            type="currency"
            required
            value={currency.average_monthly}
            onChangeValue={val =>
              setCurrency({...currency, average_monthly: val})
            }
            placeholder="3.000.000"
            label={t('average_monthly_sales')}
          />
        </ScrollView>
        <Button title={t('save')} onPress={() => navigation.goBack()} />
      </View>
    </Container>
  );
};

export default BusinessSummary;