import React, {memo} from 'react'; import { Image, Modal, ScrollView, TextInput, TouchableOpacity, View, } from 'react-native'; import FastImage from 'react-native-fast-image'; import AppText from '../../../components/AppText'; import ButtonComponent from '../../../components/ButtonComponent'; import config from '../../../config'; import commonStyles from '../../../styles/commonStyles'; import {IMAGES, IconProfile} from '../../../values/images'; import styles from '../style'; const BirthdayModal = React.memo( props => { const { modalVisible, handleCloseDesBirthday, openModalWishBirthday, addMoreImgFromGallery, closeModalWishBirthday, closeModalHappyBirthday, } = props; return ( <Modal style={commonStyles.baseShadow} animationType="slide" transparent={true} visible={modalVisible.isVisible}> <View style={{flex: 1, justifyContent: 'flex-end'}} //activeOpacity={0} //onPress={handleCloseDesBirthday} > <View style={styles.contentContainer}> <ScrollView> <ButtonComponent iconSource={IconProfile.IcCloseBlack} styleIcon={{width: 20, height: 20}} style={{ alignSelf: 'flex-end', marginRight: 10, marginTop: 10, }} onPress={handleCloseDesBirthday} /> <AppText style={{color: 'black', fontWeight: 'bold', fontSize: 14}}> {`Ngày ${modalVisible?.day?.day} tháng ${modalVisible?.day?.month} năm ${modalVisible?.day?.year} 🎉`} </AppText> {modalVisible?.birthdayArr?.map((item, index) => ( <View key={index} style={[ styles.viewHappyBirthday, modalVisible?.managerOpenWish[index].enable ? styles.openViewHappyBirthday : styles.closeViewHappyBirthday, ]}> <View style={{ flexDirection: 'row', justifyContent: 'space-between', }}> <View style={{flexDirection: 'row'}}> <Image source={ item.avatar ? { uri: config.imageEndPoint + item.avatar, } : IMAGES.IcAvatarDefault } style={{width: 40, height: 40, borderRadius: 5}} /> <View style={{paddingLeft: 10}}> <AppText style={ styles.txtTitle }>{`${item.first_name} ${item.middle_name} ${item.last_name}`}</AppText> <AppText>{item.position}</AppText> </View> </View> {/* {!modalVisible?.managerOpenWish[index].enable && ( <View style={{ justifyContent: 'center', alignItems: 'center', }}> <TouchableOpacity onPress={() => openModalWishBirthday(index)} style={styles.btnOpenHappyBirthday}> <Image source={IMAGES.IcOutlineSend} style={{width: 10, height: 10}} /> </TouchableOpacity> </View> )} */} </View> {modalVisible?.managerOpenWish[index].enable && ( <View> <View style={{marginTop: 10}}> <TextInput multiline numberOfLines={3} placeholder={'Vui lòng nhập lời chúc tại đây'} style={{borderWidth: 0.2}} /> {/** suggest wish */} <View> <ButtonComponent style={styles.btnSuggest} text={'Chúc bà sinh nhật dui dẻ nha 🌺'} textStyle={{color: 'white'}} /> <ButtonComponent style={styles.btnSuggest} text={'Tuổi mới sinh đẹp nhaaaa 🌺💃'} textStyle={{color: 'white'}} /> </View> <View style={{flexDirection: 'row'}}> {item?.imgArr && item?.imgArr.map((el, position) => { return ( <View key={position} style={{marginRight: 10}}> <FastImage source={{ uri: el.uri, }} style={{ width: 60, height: 60, marginTop: 10, }} /> </View> ); })} {!item.imgArr && ( <View style={styles.viewAddMoreImg}> <ButtonComponent iconSource={IMAGES.IcAddMoreImg} styleIcon={{height: 25, width: 25}} onPress={() => addMoreImgFromGallery(index)} /> </View> )} </View> </View> <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 10, }}> <TouchableOpacity onPress={() => closeModalWishBirthday(index)} style={{alignSelf: 'flex-end'}}> <AppText style={{color: 'blue', fontWeight: '600'}}> {' '} Hủy{' '} </AppText> </TouchableOpacity> <TouchableOpacity onPress={() => closeModalHappyBirthday(index)} style={{alignSelf: 'flex-end'}}> <AppText style={{color: 'blue', fontWeight: '600'}}> Gửi </AppText> </TouchableOpacity> </View> </View> )} </View> ))} </ScrollView> </View> </View> </Modal> ); }, function areEqual(prevProps, nextProps) { return prevProps.modalVisible === nextProps.modalVisible; }, ); export default memo(BirthdayModal);