import { useParams } from "react-router-dom";

import { Column } from "@/common/components/Matrix/Column";
import { Matrix } from "@/common/components/Matrix/Matrix";
import { AreaModel } from "@/contracts/client.schemas";

export const AreaListPage = () => {
	const { assetId } = useParams();
	if (!assetId) {
		throw new Error("assetId is required");
	}

	const columns: Column<AreaModel>[] = [
		{
			name: "index",
			title: "Index",
			// sortable: true,
		},
		{
			name: "name",
			title: "Name",
			// sortable: true,
		},
	];

	return (
		<Matrix
			title="Areas"
			columns={columns}
			baseUrl="/api/areas"
			filters={{
				assetId,
			}}
			defaultSort={[
				{
					field: "index",
					direction: "asc",
				},
			]}
			notificationMethodPrefix="AREAS"
			getModelTitle={(x: AreaModel) => x.name}
			canCreate={true}
			canView={true}
			canRemove={true}
		/>
	);
};
