Untitled

import React, {useEffect} from 'react';
import {Text, View} from 'react-native';
import {styles} from './styles';
import {COLORS} from '../../theme';
import Feather from 'react-native-vector-icons/Feather';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {IconButton} from 'react-native-paper';
import {getIcon} from '../../utils/functions';
import routes from '../../navigation/routes';

export const UploadedFile = ({element, item, form, navigation, index, id}) => {
  // console.log("this is Form",id)

  function handleRemove() {
    const array = form.values[id]?.filter(a => a.name != item.name);
    form.setFieldValue(id, array);
  }

  // useEffect(() => {
  //   if (!form.values[element.elementLabel]) {
  //     form.setFieldValue(element.elementLabel, element.answer);
  //   }
  // }, []);

  return (
    <View style={styles.con} activeOpacity={0.5}>
      {/* icon */}
      <View style={styles.icon_con}>
        <Feather name={getIcon(item)} size={20} color={COLORS.primary} />
      </View>

      <View style={{flex: 1, marginHorizontal: 15}}>
        {/* file name */}
        {typeof item === 'string' ? (
          <Text style={styles.name}>{item}</Text>
        ) : (
          <Text style={styles.name}>{item?.name}</Text>
        )}
        {/* <Text style={styles.name}>{item?.name}</Text> */}
        {/* file size */}
        <Text style={styles.desc}>{item?.size}</Text>
      </View>
      <View>
        {/* delete icon */}
        <IconButton
          size={20}
          style={{margin: 0, alignSelf: 'flex-start'}}
          onPress={() => handleRemove()}
          icon={() => (
            <Feather name={'trash-2'} size={20} color={COLORS.gray4} />
          )}
        />
        {/* location icon */}
        {item?.type?.includes('image') && (
          <IconButton
            size={20}
            style={{margin: 0, alignSelf: 'flex-start'}}
            onPress={() =>
              navigation.navigate(routes.add_location, {
                form: form,
                id: id,
                image: item,
                index: index,
              })
            }
            icon={() => (
              <Ionicons
                name={'location-sharp'}
                size={24}
                color={COLORS.primary}
              />
            )}
          />
        )}
      </View>
    </View>
  );
};