"use client";

import { notFound } from 'next/navigation';
import { LocationDeleteForm, LocationDeleteFormSkeleton } from '@/app/ui/LocationDeleteForm';
import { WithId } from 'mongodb';
import { BillingLocation } from '@/app/lib/db-types';
import { useEffect, useState } from 'react';

const fetchLocationById = async (locationId: string) => {
    const response = await fetch(`/api/locations/by-id?id=${locationId}`);
    const json = await response.json();
    return json.location as WithId<BillingLocation>;
}

const LocationDeletePage = ({ locationId }: { locationId:string }) => {
    
    const [state, stateSet] = useState<{
        status: 'loading' | 'error' | 'success';
        location?: WithId<BillingLocation>;
        error?: string;
    }>({ status: 'loading' });

    useEffect(() => {

        const fetchLocation = async () => {
            try {
                const location = await fetchLocationById(locationId);
                stateSet({ location, status: 'success' });
            } catch(error:any) {
                stateSet({ status: 'error', error: error.message });
            }
        };

        fetchLocation();
        
    }, [locationId]);

    switch(state.status) {
        case "error":
            return(<div>Error: {state.error}</div>);
        case "loading":
            return(<LocationDeleteFormSkeleton />);
        case "success":
            if (!state.location) {
                return(notFound());
            }
            
            return(<LocationDeleteForm location={state.location} />);
        default:
            return(<div>Error: Unknown status</div>);
    }
}

export default LocationDeletePage;