import {Container, Text, Title} from "@mantine/core";
import {Link, useParams} from "react-router";
import {Customer} from "./types.ts";
import {useQuery} from "@tanstack/react-query";


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

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

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

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

    if (isPending) return 'Loading...'

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

    return (
        <>
            <Container m="lg">
                <Title order={1}>Customer Detail</Title>
                <div>{isFetching ? 'Updating...' : ''}</div>
                <Text>Name: {data.name}</Text>
                <Text>Company: {data.company}</Text>
                <Text>Email: {data.email}</Text>
                <Text>Phone Number: {data.phone}</Text>
                <Text>Address: ${data.address}</Text>
                <Text>Notes: {data.notes}</Text>

                <Link to={`/customers/editCustomer/${data.id}`}>Edit</Link>
            </Container>
        </>
    )
}

export default CustomerDetail