import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";

import { useForm } from "@tanstack/react-form";

import axios from "axios";
import { toast } from "sonner";

export default function ModuleForm(props: any) {
    const token = localStorage.getItem("auth_token");
    const role =
        props.user?.moduleRoles?.filter(
            (m: any) => m.module_id === props.module.module_id
        )[0]?.role ?? " ";
    const form = useForm({
        defaultValues: {
            role: role,
        },
        onSubmit: async ({ value }) => {
            const data: any = {
                username: props.user.username,
                module: props.module.name,
                role: value.role,
            };
            console.log(data);
            try {
                const res = await axios.post("/api/auth/setuseraccess", data, {
                    headers: {
                        Authorization: `Bearer ${token}`,
                    },
                });

                if (res.data.success) {
                    toast.success(res.data.message);
                    props.refetch();
                    form.reset();
                } else {
                    res.data.message;
                }
            } catch (error) {
                console.log(error);
            }
        },
    });

    return (
        <div className="">
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
                }}
                className="flex flex-row"
            >
                <form.Field
                    name="role"
                    //listeners={{onChange: ({value})=>{}}}
                    children={(field) => {
                        return (
                            <div className="m-2 min-w-48 max-w-96 p-2">
                                <Label htmlFor={field.name}>
                                    Module: {props.module.name}
                                </Label>
                                <Select
                                    value={field.state.value}
                                    onValueChange={field.handleChange}
                                >
                                    <SelectTrigger className="w-[180px]">
                                        <SelectValue
                                            id={field.name}
                                            placeholder="Select Role"
                                        />
                                    </SelectTrigger>
                                    <SelectContent>
                                        <SelectGroup>
                                            <SelectLabel>Roles</SelectLabel>
                                            <SelectItem value="viewer">
                                                Viewer
                                            </SelectItem>
                                            <SelectItem value="technician">
                                                Technician
                                            </SelectItem>
                                            <SelectItem value="supervisor">
                                                Supervisor
                                            </SelectItem>
                                            <SelectItem value="manager">
                                                Manager
                                            </SelectItem>
                                            <SelectItem value="tester">
                                                Tester
                                            </SelectItem>
                                            <SelectItem value="admin">
                                                Admin
                                            </SelectItem>
                                        </SelectGroup>
                                    </SelectContent>
                                </Select>
                            </div>
                        );
                    }}
                />
                <div className="mt-4">
                    <Button type="submit" onClick={form.handleSubmit}>
                        Save
                    </Button>
                </div>
            </form>
        </div>
    );
}
