import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"

import {
    Card,
    CardContent,
    CardHeader,
    CardTitle,
} from "@/components/ui/card"
import {Order} from "@/models/Order.ts";
import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
import React from "react";

const defaultData: Order[] = [
    {
        id: "1",
        status: "Оплачен",
        cost: 1990
    },
    {
        id: "2",
        status: "В работе",
        cost: 975
    },
    {
        id: "3",
        status: "Отменен",
        cost: 721
    },
]

const columnHelper = createColumnHelper<Order>()

const columns = [
    columnHelper.accessor(row => row.id, {
        id: 'id',
        header: () => <span>Номер заказа</span>,
        cell: info => info.renderValue(),
    }),
    columnHelper.accessor(row => row.status, {
        id: 'status',
        header: () => <span>Статус</span>,
        cell: info => info.renderValue(),
    }),
    columnHelper.accessor(row => row.cost, {
        id: 'cost',
        header: () => <span>Стоимость</span>,
        cell: info => info.renderValue(),
        meta: {
            className: 'text-right',
        },
    }),
]

export default function OrdersTable() {
    const [data, _setData] = React.useState<Order[]>(() => [...defaultData]);
    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
    })

    return (
        <Card>
            <CardHeader>
                <CardTitle>Заказы</CardTitle>
            </CardHeader>
            <CardContent>
                <Table>
                    <TableHeader>
                        {table.getHeaderGroups().map((headerGroup) => (
                            <TableRow key={headerGroup.id}>
                                {headerGroup.headers.map((header) => (
                                    <TableHead key={header.id}>
                                        {flexRender(
                                            header.column.columnDef.header,
                                            header.getContext()
                                        )}
                                    </TableHead>
                                ))}
                            </TableRow>
                        ))}
                    </TableHeader>
                    <TableBody>
                        {table.getRowModel().rows.map(row => (
                            <TableRow key={row.id}>
                                {row.getVisibleCells().map((cell) => (
                                    <TableCell key={cell.id} className={cell.column.columnDef.meta?.className}>
                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                    </TableCell>
                                ))}
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    )
}