utopia-ui/src/Components/Map/Subcomponents/ItemFormPopup.tsx

import * as React from 'react'
import { LatLng } from 'leaflet'
import { Popup as LeafletPopup, useMap } from 'react-leaflet'
import { useEffect, useState } from 'react'
import { useAddItem, useUpdateItem } from '../hooks/useItems'
import { Geometry, LayerProps, Item, ItemsApi } from '../../../types'
import TextAreaInput from '../../Input/TextAreaInput'
import InputText from '../../Input/InputText'

export interface ItemFormPopupProps {
    position: LatLng,
    layer: LayerProps,
    item?: Item,
    api?: ItemsApi<any>,
    setItemFormPopup: React.Dispatch<React.SetStateAction<any>>
}

export default function ItemFormPopup(props: ItemFormPopupProps) {

    const [spinner, setSpinner] = useState(false);

    const map = useMap();
    const addItem = useAddItem();
    const updateItem = useUpdateItem();

    const handleSubmit = async (evt: any) => {
        const formItem: Item = {} as Item;
        Array.from(evt.target).forEach((input: HTMLFormElement) => {
            if (input.name) {
                console.log(input.name + ": " + input.value);
                formItem[input.name] = input.value;
            }
        });
        formItem['position']=new Geometry(props.position.lng, props.position.lat);
        evt.preventDefault();
        setSpinner(true);

        if (props.item) {
            formItem['id']=props.item.id;
            await props.api?.updateItem!(formItem);
            formItem['api']=props.api;
            formItem['layer']=props.layer;
            await updateItem(formItem);
            setSpinner(false);
            map.closePopup();
        }
        else {
            formItem['id']=crypto.randomUUID();
            await props.api?.createItem!(formItem);
            formItem['api']=props.api;
            formItem['layer']=props.layer;
            await addItem(formItem);
            setSpinner(false);
            map.closePopup();
        }
        props.setItemFormPopup(null);
    }


    return (
        <LeafletPopup minWidth={275} maxWidth={275} autoPanPadding={[20, 5]}
            eventHandlers={{
              //  remove: resetPopup
            }}
            position={props.position}>
            <form onSubmit={e => handleSubmit(e)}>
                <div className='tw-flex tw-justify-center'><b className="tw-text-xl tw-font-bold">New {props.layer.name}</b></div>
                <InputText type="text" placeholder="Name" dataField="name" defaultValue={props.item? props.item.name : ""}  />
                <TextAreaInput placeholder="Text" dataField="text" defaultValue={props.item ?  props.item.text : ""}  inputStyle='tw-h-40 tw-mt-5' />
                <div className='tw-flex tw-justify-center'><button className={spinner ? 'tw-btn tw-loading tw-mt-5 tw-place-self-center' : 'tw-btn tw-mt-5 tw-place-self-center'}>Save</button></div>
            </form>
        </LeafletPopup>
    )
}