import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import MapView, { Marker } from 'react-native-maps';
import * as XLSX from 'xlsx';

const StoreMapScreen = () => {
  const [stores, setStores] = useState([]);

  useEffect(() => {
    // Đọc dữ liệu từ file Excel khi màn hình được load
    readExcelData();
  }, []);

  const readExcelData = async () => {
    try {
      const fileUri = 'path_to_your_excel_file/data.xlsx';
      const workbook = XLSX.readFile(fileUri);
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      const data = XLSX.utils.sheet_to_json(sheet);
      setStores(data);
    } catch (error) {
      console.error('Error reading Excel file:', error);
    }
  };

  const updateStoreInfo = (storeId, newInfo) => {
    // Cập nhật thông tin cửa hàng với ID cho trước
    // Cập nhật dữ liệu stores và cập nhật trực tiếp lên bản đồ
  };

  return (
    <View  flex: 1 }}>
      <MapView
          flex: 1 }}
         initialRegi
          latitude: 37.78825,
          longitude: -122.4324,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
      >
        {stores.map(store => (
          <Marker
            key={store.id} // Giả sử cửa hàng có trường id
            coordinate={{ latitude: store.latitude, longitude: store.longitude }} // Giả sử các cửa hàng có thông tin vị trí
            title={store.name}
             descripti
              => console.log('Marker pressed:', store)}
          />
        ))}
      </MapView>
      <View  position: 'absolute', bottom: 20, left: 20 }}>
        <Button title="Update Store Info"  => updateStoreInfo(storeId, newInfo)} />
      </View>
    </View>
  );
};

export default StoreMapScreen;