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

const BUSINESS_PROFILE = [
  {
    name: 'Informasi usaha',
    completed: true,
    route: 'BusinessSummary',
  },
  {
    name: 'Informasi outlet',
    completed: false,
    route: 'OutletSummary',
  },
  {
    name: 'Informasi rekening bank',
    completed: false,
    route: 'BankAccount',
  },
  {
    name: 'Jam operasional',
    completed: false,
    route: 'OperationalTime',
  },
  {
    name: 'Kategori dan Menu makanan',
    completed: false,
    route: 'MenuCategory',
  },
];

const BusinessProfileRegistration = ({navigation}) => {
  const [modal, setModal] = useState(false);
  const {t} = useTranslation();
  return (
    <Container backgroundColor={Colors.WHITE}>
      <Header
        navigation={navigation}
        smTitle={t('merchant_registration_title')}
      />
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.infoSection}>
            <Text style={styles.title}>
              {t('complete_your_business_data_text')}
            </Text>
            <Note message="Anda perlu melengkapi data usaha anda, dan menyetujui syarat & ketentuan yang berlaku." />
          </View>
          <View style={styles.profileDataSection}>
            {BUSINESS_PROFILE.map((item, index) => (
              <TouchableOpacity
                activeOpacity={0.7}
                key={index}
                onPress={() => navigation.navigate(item.route)}
                style={styles.itemSection}>
                <View style={styles.checkIconSection(item.completed)}>
                  <Icon name="check" type="Feather" style={styles.checkIcon} />
                </View>
                <View style={styles.itemTitleSection}>
                  <Text style={styles.itemTitle}>{item.name}</Text>
                </View>
                <Icon
                  name="chevron-right"
                  type="Feather"
                  style={styles.chevronRight}
                />
              </TouchableOpacity>
            ))}
          </View>
        </ScrollView>
        <View style={styles.noteSecureSection}>
          <Icon
            name="shield-checkmark"
            type="Ionicons"
            style={styles.shieldIcon}
          />
          <Text style={styles.noteSecureText}>
            Data Anda akan diverifikasi oleh MealBox. itu akan tetap aman dan
            terjamin
          </Text>
        </View>
        <Button title={t('send_data_text')} onPress={() => setModal(true)} />
      </View>
      <ModalTermsAndConditions
        isVisible={modal}
        onClose={() => setModal(false)}
      />
    </Container>
  );
};

export default BusinessProfileRegistration;
