import {Button, Group, TextInput, Text, Textarea, NumberInput} from '@mantine/core';
import { useForm } from '@mantine/form';
import {useParams} from "react-router";
import {useQuery} from "@tanstack/react-query";
import {InventoryItem} from "./types.ts";

function EditItem() {
    const params = useParams();

    const form = useForm({
        mode: 'uncontrolled',
        initialValues: {
            email: '',
            termsOfService: false,
        },

        validate: {
        },
    });

    const { isPending, error, data, isFetching } = useQuery({
        queryKey: ['inventory', params.itemId],
        queryFn: async (): Promise<InventoryItem> => {
            const response = await fetch(
                import.meta.env.VITE_API_URL + '/inventory/' + params.itemId,
            )

            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)

            return await response.json()
        },
    });

    if (isPending) return 'Loading...'

    if (error) return 'An error has occurred: ' + error.message


    return (
        <form onSubmit={form.onSubmit((values) => console.log(values))}>
            <div>{isFetching ? 'Updating...' : ''}</div>
            <Text>ID: {data.id}</Text>
            <TextInput withAsterisk size="md" label="Brand" placeholder="Brand"/>
            <TextInput withAsterisk size="md" label="Name" placeholder="Name"/>
            <TextInput size="md" label="Status" placeholder="Status"/>
            <TextInput size="md" label="Serial Number" placeholder="Serial Number"/>
            <NumberInput size="md" label="Rental Price" placeholder="Rental Price"/>
            <NumberInput size="md" label="Replacement Cost" placeholder="Replacement Cost"/>
            <Textarea label="Notes" placeholder="Notes"/>

            <Group justify="flex-end" mt="md">
                <Button type="submit">Submit</Button>
            </Group>
        </form>
    );
}

export default EditItem;