import { Text, View, Image, Pressable } from 'react-native';
import { gStyle } from '../styles/style';
import React, {useState, useEffect} from 'react';
import { useNavigation } from '@react-navigation/native';
import {firebase} from '../Firebase/firebase';
import moment from 'moment';
import 'firebase/compat/storage';
import 'firebase/compat/firestore';


export default function FutureMK() {
    const navigation = useNavigation();
    const [futureMKData, setFutureMKData] = useState([]);

    useEffect(() => {
    const fetchData = async () => {
    try {
    const futureMKRef = firebase.firestore().collection('FutureMK');
    const snapshot = await futureMKRef.get();
    const data = snapshot.docs.map((doc) => doc.data());
    const storage=firebase.storage();
    const updateData = await Promise.all(data.map(async(mkData)=>{
        const imagePath = mkData.imageUrl;
        const imageRef = storage.ref().child(imagePath);
        const url = await imageRef.getDownloadURL();
        return {...mkData, imageUrl:url};
    }))
    setFutureMKData(updateData);
    } catch (error) {
    console.log(error);
    }
    };

    fetchData();
    }, []);
  return (
    <View style={gStyle.main}>
        {futureMKData.map((mkData, index)=>(
            <View key={index} style={gStyle.mainFMK}>
            <Text style={gStyle.dateFutureMK}>{moment(mkData.time.toDate()).format('Do MMM YYYY')}</Text>
            <View style={gStyle.FutureMKimg}>
                <Image source={{uri:mkData.imageUrl}} style={gStyle.FutureMKbannerImg}/>
                <Text style={gStyle.FutureMKnameOfMK}>{mkData.name}</Text>
                <Text style={gStyle.hr}></Text>
            </View>
            <Text style={gStyle.FutureMKprice}>Цена: <Text style={gStyle.FutureMKrub}>{mkData.price} P.</Text></Text>
            <Text style={gStyle.FutureMKdescription}>
            {mkData.description}
            </Text>
            <Pressable style={gStyle.FutureMKmoreDetails} 
            onPress={()=>{navigation.navigate('SignUpForMK',{mkData});}}
            >
                <Text style={gStyle.FutureMKbtnTxt}>Подробнее</Text>
            </Pressable>
            <Text style={gStyle.FutureMKline}></Text>
            </View>
        ))}
        
        </View>
  );
}

 LOG  [TypeError: Cannot read property 'split' of undefined]
i dont know where is error