import React, {useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  Image,
  StyleSheet,
  Alert,
} from 'react-native';
import PickerImgUni from '../../../components/Picker/PickerImgUni';
import R from '../../../assets/R';

import {checkFormatArray} from '../../../Config/Functions';

const Profile = (props) => {
  const [urlFont, setUrlFont] = useState('');
  const [urlBack, setUrlBack] = useState('');
  const [urlSign, setUrlSign] = useState('');

  const onNextPress = () => {
    const titles = ['CNND mặt trước', 'CMND mặt sau', 'chữ ký'];
    const index = checkFormatArray([urlFont, urlBack, urlSign]);

    if (index === true) {
      props.navigation.navigate('BankInfor', {
        urlFont,
        urlBack,
        urlSign,
        ...props.route.params,
      });
    } else {
      Alert.alert('Vui lòng thêm ảnh ' + titles[index]);
    }
  };

  return (
    <View
      style={{
        flex: 1,
        paddingHorizontal: 10,
        paddingTop: 10,
      }}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          flexWrap: 'wrap',
        }}>
        <PickerImgUni
          onSelectImg={(path) => setUrlFont(path)}
          title={'Ảnh mặt trước CMND'}
        />
        <PickerImgUni
          onSelectImg={(path) => setUrlBack(path)}
          title={'Ảnh mặt sau CMND'}
        />
        <PickerImgUni
          onSelectImg={(path) => setUrlSign(path)}
          title={'Ảnh chữ ký'}
        />
      </View>
      <TouchableOpacity onPress={onNextPress} style={styles.btnNext}>
        <Image style={{width: 30, height: 30}} source={R.images.iconRight1} />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  btnNext: {
    borderRadius: 30,
    backgroundColor: '#1473E6',
    width: 50,
    height: 50,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 20,
    alignSelf: 'flex-end',
    elevation: 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.15,
    shadowRadius: 1.84,
  },
});

export default Profile;
