import { LstCard } from "@/components/extendedUI/LstCard";
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table";
import { useSessionStore } from "@/lib/store/sessionStore";
import { useModuleStore } from "@/lib/store/useModuleStore";
import { useQuery } from "@tanstack/react-query";
import { useRouter } from "@tanstack/react-router";
import { ChangeSetting } from "./SettingForm";
import { getSettings } from "@/utils/querys/settings";
import { Skeleton } from "@/components/ui/skeleton";

export type Settings = {
    settings_id?: string;
    name?: string;
    value?: string;
    description?: string;
};

export default function SettingsPage() {
    const { user, token } = useSessionStore();
    const { modules } = useModuleStore();
    const router = useRouter();

    const adminModule = modules.filter((n) => n.name === "admin");
    const userLevel =
        user?.roles.filter((r) => r.module_id === adminModule[0].module_id) ||
        [];

    if (!adminModule[0].roles.includes(userLevel[0]?.role)) {
        router.navigate({ to: "/" });
    }

    const { data, isError, error, isLoading } = useQuery(
        getSettings(token ?? "")
    );

    // if (isLoading) {
    //     return <div>Loading.....</div>;
    // }
    if (isError) {
        return <div>{JSON.stringify(error)}</div>;
    }

    return (
        <LstCard className="m-2 flex place-content-center w-fit">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Value</TableHead>
                        <TableHead>Description</TableHead>
                        <TableHead>Change</TableHead>
                    </TableRow>
                </TableHeader>
                {isLoading ? (
                    <>
                        <TableBody>
                            {Array(10)
                                .fill(0)
                                .map((_, i) => (
                                    <TableRow key={i}>
                                        <TableCell className="font-medium">
                                            <Skeleton className="h-4" />
                                        </TableCell>
                                        <TableCell>
                                            <Skeleton className="h-4" />
                                        </TableCell>
                                        <TableCell>
                                            <Skeleton className="h-4" />
                                        </TableCell>
                                        <TableCell>
                                            <Skeleton className="h-4" />
                                        </TableCell>
                                    </TableRow>
                                ))}
                        </TableBody>
                    </>
                ) : (
                    <TableBody>
                        {data?.map((setting: Settings) => (
                            <TableRow key={setting.settings_id}>
                                <TableCell className="font-medium">
                                    {setting.name}
                                </TableCell>
                                <TableCell className="font-medium">
                                    {setting.value}
                                </TableCell>
                                <TableCell className="font-medium">
                                    {setting.description}
                                </TableCell>
                                <TableCell className="font-medium">
                                    <ChangeSetting setting={setting} />
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                )}
            </Table>
        </LstCard>
    );
}