import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, Image} from 'react-native';
import styles from './style';
import R from '../../../assets/R';
import Button from '../../../components/Button';
import { useNavigation } from '@react-navigation/native';
import EmailChipInput from '../../../components/Chip/EmailChipInput';

const SendEmailView = (props) => {
  const { handleChange, chip, dataList } = props;

const navigation = useNavigation();

const renderHeader = () => {
    return (
        <View style={styles.header}>
            <TouchableOpacity onPress={() => navigation.goBack()}>
                <Image source={R.images.icBack} style={styles.icon}/>
            </TouchableOpacity>
            <Text style={styles.title}>Soạn email</Text>
            <TouchableOpacity onPress={() => (navigation.goBack())} style={styles.sendButton}>
              <Text style={styles.sendText}>Gửi Đi</Text>
              <Image source={R.images.icSend} style={styles.iconSend} tintColor={R.colors.white}/>
            </TouchableOpacity>
        </View>
    );
}
  
  return (
    <View
      style={styles.container}>
          {renderHeader()}
        <View style={styles.body}>
        
          <EmailChipInput
            title="To"
            delimiters={dataList}
            entries={chip}
            onSubmit={handleChange}
            chipContainerStyle={{ backgroundColor: R.colors.blue4}}
            chipTextStyle={{ color:R.colors.black }}
            chipImage={
              <Image source={R.images.icCancel} style={styles.iconClose} tintColor={R.colors.blue}/>
            }
          />
  

        </View>
    </View>
  );
};

export default SendEmailView;
