import { LstCard } from "@/components/extendedUI/LstCard";
import { Label } from "@/components/ui/label";
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectTrigger,
    SelectValue,
} from "@/components/ui/select";
import { useForm } from "@tanstack/react-form";

export default function SubModuleForm(props: any) {
    const form = useForm({
        defaultValues: { role: "" },
        onSubmit: async ({ value }) => {
            console.log(value);
        },
    });

    return (
        <div className="m-2 p-1">
            <LstCard>
                <p className="text-center">
                    Module: {props.i.moduleName}, <br />
                    SubModule: {props.i.name}
                </p>

                <p className="p-1">
                    Current role:{" "}
                    {props.hasRole[0]?.role
                        ? props.hasRole[0].role
                        : "not assigned"}
                </p>
                <form
                    onSubmit={(e) => {
                        e.preventDefault();
                        e.stopPropagation();
                    }}
                >
                    <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}>
                                        Select role
                                    </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>
                            );
                        }}
                    />
                </form>
            </LstCard>
        </div>
    );
}
