import { useEffect, useState } from "react";
import { useMutationAPI, useQueryAPI } from "../../../hooks/useAPI";
import { DataTable } from "../../../DataTable/DataTable";
import { toast } from "react-toastify";
import type { MRT_TableOptions } from "mantine-react-table";
import SearchProviderColumns from "../../../DataTable/columns/SearchProviderColumns";
import { Stack, Text } from "@mantine/core";
import { textClasses } from "../../../styles";
const SearchProviderSettings = () => {
	const endpoint = "api/providers";
	const { data, isFetching, isLoading, isFetched } = useQueryAPI({
		endpoint: endpoint,
	});
	const [providerData, setProviderData] = useState<any>([]);

	const { mutateAsync: createRow, isPending: isCreatingRow } = useMutationAPI();
	const { mutateAsync: editRow, isPending: isEditingRow } = useMutationAPI();

	useEffect(() => {
		if (isFetched) {
			setProviderData(data);
		}
	});

	const handleCreateRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
		values,
		exitCreatingMode,
	}) => {
		createRow({ method: "POST", endpoint: endpoint, body: values }).then(() => {
			toast.success("Search provider created successfully");
		});
		exitCreatingMode();
	};
	const handleEditRow: MRT_TableOptions<any>["onCreatingRowSave"] = async ({
		values,
		table,
	}) => {
		editRow({ method: "PATCH", endpoint: endpoint, body: values }).then(() => {
			toast.success("Search provider updated successfully");
		});
		table.setEditingRow(null);
	};

	return (
		<Stack>
			<Text className={textClasses.settingsSubTitle} classNames={textClasses}>
				Search Providers
			</Text>
			<DataTable
				tableName="Categories"
				columns={SearchProviderColumns()}
				tableData={providerData}
				isFetching={isFetching}
				isLoading={isLoading}
				onCreatingRowSave={handleCreateRow}
				onEditingRowSave={handleEditRow}
			/>
		</Stack>
	);
};
export default SearchProviderSettings;