import React, { useRef, useState, useEffect } from "react";
import { IconButton } from "theme-ui";
import AddMapModal from "../modals/AddMapModal";
const defaultMapSize = 22;
function AddMapButton({ onMapChanged }) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
function openModal() {
setIsAddModalOpen(true);
}
function closeModal() {
setIsAddModalOpen(false);
}
const [imageLoaded, setImageLoaded] = useState(false);
const mapDataRef = useRef(null);
const [mapSource, setMapSource] = useState(null);
function handleImageUpload(event) {
const file = event.target.files[0];
const url = URL.createObjectURL(file);
let image = new Image();
image.onload = function () {
mapDataRef.current = {
file,
rows,
columns,
width: image.width,
height: image.height,
};
setImageLoaded(true);
};
image.src = url;
setMapSource(url);
}
function handleDone() {
if (mapDataRef.current && mapSource) {
onMapChanged(mapDataRef.current, mapSource);
}
closeModal();
}
const [rows, setRows] = useState(defaultMapSize);
const [columns, setColumns] = useState(defaultMapSize);
useEffect(() => {
if (mapDataRef.current) {
mapDataRef.current.rows = rows;
mapDataRef.current.columns = columns;
}
}, [rows, columns]);
return (
<>
);
}
export default AddMapButton;