import { useState } from 'react';
import UserFilters from './UserFilters';
import UserTable from './UserTable';
import UserDetails from './UserDetails';
import RoleEditorDialog from './RoleEditorDialog';
import useDictionaries from "../../hooks/useDictionaries.tsx";
import {UserListFilters} from "../../../api/UserApi.tsx";
import {UserInfoShort} from "../../../api/models/AccountTypes.tsx";

export default function Users() {
    const [filters, setFilters] = useState({ page: 1, itemsOnPage: 10 } as UserListFilters);
    const [selectedUser, setSelectedUser] = useState<UserInfoShort | null>(null);
    const [rolesDialogOpen, setRolesDialogOpen] = useState(false);

    // const { languages, roles, permissions, isLoading: dictLoading } = useDictionaries();
    const { languages } = useDictionaries();

    return (
        <div className="grid">
            <div className="col-12 lg:col-8">
                <UserFilters filters={filters} languages={languages ?? []}
                             selectedLanguageId={null}
                             onChange={(filters, languageId) => {
                                 setFilters(filters);
                             } } />
                <UserTable filters={filters} onSelect={setSelectedUser} />
            </div>

            <div className="col-12 lg:col-4">
                <UserDetails
                    user={selectedUser}
                    onEditRoles={() => setRolesDialogOpen(true)}
                />
            </div>

            {/*<RoleEditorDialog*/}
            {/*    visible={rolesDialogOpen}*/}
            {/*    onHide={() => setRolesDialogOpen(false)}*/}
            {/*    user={selectedUser}*/}
            {/*    allRoles={roles}*/}
            {/*    allPermissions={permissions}*/}
            {/*/>*/}
        </div>
    );
}
