import roles from "@/routes/roles";
import { UserRole } from "@/types/user";
import axios from "axios";
import { useEffect, useState } from "react"
import { Form } from "react-bootstrap";

interface Props {
    values: number[];
    onChange: (value: number, checked: boolean) => void;
}

export default function SelectRoles({ values, onChange }: Props) {
    const [options, setOptions] = useState<UserRole[] | []>([]);

    const fetchData = async () => {
        try {
            const { data: res } = await axios.get(roles.index.url(), {
                params: {
                    json: true,
                },
            });

            setOptions(res);
        } catch (error) {
            console.error(error);
        }
    }

    useEffect(() => {
        fetchData();
    }, []);

    return (
        <div>
            {options.map((item, itemIndex) => (
                <Form.Check
                    key={itemIndex}
                    type="checkbox"
                    name="checkbox-roles"
                    id={`checkbox-role-${item.id}`}
                    label={String(item.name).toUpperCase()}
                    checked={values.includes(item.id)}
                    onChange={(e) => onChange(item.id, e.target.checked)}
                    inline
                />
            ))}
        </div>
    )
}