'use client'
import Link from 'next/link'
import {useQuery} from "@tanstack/react-query";
import {
    Table,
    TableBody,
    TableCaption,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"

import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"


import {useGetProjects} from "@/queries/project";
import { IProject } from "@/types/project"
import {numberWithCommas} from "@/utils/helper";
import {useGetOrderList} from "@/queries/order";

const Page = ()=>{
    const {data:orders, isLoading, isError} = useGetOrderList('canceled')

    if(isLoading){
        return <div>Loading...</div>
    }

    if(isError){
        return <div>Error</div>
    }



    return (
        <>

            <Table>
                <TableCaption>سفارشات ثبت شده اخیر</TableCaption>
                <TableHeader>
                    <TableRow>
                        <TableHead className="w-[100px] text-center">ردیف</TableHead>
                        <TableHead className="text-center">عنوان</TableHead>
                        <TableHead className={"text-center"}>نام و نام خانوادگی</TableHead>
                        <TableHead className={"text-center"} >استان</TableHead>
                        <TableHead className={"text-center"} >شهر</TableHead>

                        <TableHead className="text-center">مشاهده</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {orders?.results?.map((order:any, key:number)=>(
                        <TableRow className={'*:text-center'} key={key}>
                            <TableCell>{key+1}</TableCell>
                            <TableCell>{order.name}</TableCell>
                            <TableCell>{order.name_family}</TableCell>
                            <TableCell>{order.ostan}</TableCell>
                            <TableCell>{order.city}</TableCell>
                            <TableCell>
                                <Link href={`/orders/${order.id}`}>
                                    مشاهده
                                </Link>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </>
    )
}

export default Page;