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

const PROVINCE = [
  {label: 'DIY Yogyakarta', value: 1},
  {label: 'Makassar', value: 2},
  {label: 'Jakarta', value: 3},
  {label: 'Bandung', value: 4},
  {label: 'Surabaya', value: 5},
];
const DISTRICT = [
  {label: 'DIY Yogyakarta', value: 1},
  {label: 'Makassar', value: 2},
  {label: 'Jakarta', value: 3},
  {label: 'Bandung', value: 4},
  {label: 'Surabaya', value: 5},
];

const OutletSummary = ({navigation}) => {
  const [isSamePhone, setIsSamePhone] = useState(false);
  const [phoneNumber, setPhoneNumber] = useState('');
  const {t} = useTranslation();

  const handleSelectBoxPhoneNumber = () => {
    setIsSamePhone(!isSamePhone);
    setPhoneNumber(isSamePhone ? '' : '089674462657');
  };
  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header navigation={navigation} smTitle={t('outlet_summary_title')} />
      <View style={styles.container}>
        <ScrollView
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.scrollview}>
          <View style={styles.spacing} />
          <Input
            type="phone"
            required
            editable={!isSamePhone}
            value={phoneNumber}
            placeholder="08x xxx xxx"
            label={t('phone_input')}
          />
          <View style={styles.checkboxSection}>
            <TouchableOpacity
              onPress={() => handleSelectBoxPhoneNumber()}
              style={styles.checkIconSection(isSamePhone)}>
              <Icon name="check" type="Feather" style={styles.checkIcon} />
            </TouchableOpacity>
            <Text style={styles.checkboxTitle}>Gunakan No.Telepon pemilik</Text>
          </View>
          <View style={styles.spacing} />
          <Input
            type="maps"
            required
            label={t('select_outlet_location_text')}
          />
          <View style={styles.spacing} />
          <Input
            type="text"
            required
            label={t('outlet_full_address_text')}
            note={t('outlet_full_address_note')}
          />
          <View style={styles.spacing} />
          <Input
            type="select"
            required
            data={PROVINCE}
            label={t('province_text')}
          />
          <View style={styles.spacing} />
          <Input
            type="select"
            required
            data={DISTRICT}
            label={t('district_text')}
          />
          <View style={styles.spacing} />
          <Input
            type="text"
            keyboardType="decimal-pad"
            required
            label={t('postal_code_text')}
          />
          <View style={styles.spacing} />
          <View style={styles.inputImageContainer}>
            <Text style={styles.inputImageLabel}>{t('outlet_image_text')}</Text>
            <View style={styles.inputImageSection}>
              <View style={styles.inputImageIconSection}>
                <Icon
                  name="camera"
                  type="Feather"
                  style={styles.inputImageIcon}
                />
              </View>
              <View style={styles.inputImageInfoSection}>
                <Text style={styles.inputImageInfoLabel}>
                  {t('outlet_image_text')}
                  <Text style={{color: Colors.RED}}>*</Text>
                </Text>
                <Text style={styles.inputImageInfoSubLabel}>
                  {t('outlet_image_note')}
                </Text>
              </View>
            </View>
          </View>
        </ScrollView>
        <View style={styles.spacing} />
        <Button title={t('save')} onPress={() => navigation.goBack()} />
      </View>
    </Container>
  );
};

export default OutletSummary;
