import PermissionController from "@/actions/App/Http/Controllers/PermissionController";
import axios from "axios";
import { useEffect, useState } from "react";
import { Form } from "react-bootstrap";

interface ResponsePermission {
    id: number;
    name: string;
    action: string;
}

interface ResponseData {
    key: string;
    label: string;
    permissions: ResponsePermission[];
}

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

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

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

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

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

    return (
        <div>
            {options.map((option, optionIndex) => (
                <div key={optionIndex} className="mb-4">
                    <h6 className="fw-medium opacity-75">{option.label}</h6>
                    {option.permissions.map((permission, permissionIndex) => (
                        <Form.Check
                            key={permissionIndex}
                            name="checkbox-permission"
                            id={`checkbox-permission-${permission.id}`}
                            label={permission.action}
                            onChange={(e) => onChange(permission.id, e.target.checked)}
                            checked={values?.includes(permission.id)}
                            inline
                        />
                    ))}
                </div>
            ))}
        </div>
    )
}