/*
 * This file belongs to Hoist, an application development toolkit
 * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
 *
 * Copyright © 2026 Extremely Heavy Industries Inc.
 */
import {recategorizeDialog} from '@xh/hoist/admin/tabs/userData/roles/recategorize/RecategorizeDialog';
import {grid} from '@xh/hoist/cmp/grid';
import {fragment, hframe, vframe} from '@xh/hoist/cmp/layout';
import {creates, hoistCmp} from '@xh/hoist/core';
import {button, colChooserButton} from '@xh/hoist/desktop/cmp/button';
import {filterChooser} from '@xh/hoist/desktop/cmp/filter';
import {switchInput} from '@xh/hoist/desktop/cmp/input';
import {panel} from '@xh/hoist/desktop/cmp/panel';
import {recordActionBar} from '@xh/hoist/desktop/cmp/record';
import {Icon} from '@xh/hoist/icon';
import {roleDetails} from './details/RoleDetails';
import {roleEditor} from './editor/RoleEditor';
import {roleGraph} from './graph/RoleGraph';
import {RoleModel} from './RoleModel';

export const rolePanel = hoistCmp.factory({
    displayName: 'RolePanel',
    model: creates(RoleModel),

    render({className, model}) {
        const {gridModel, readonly} = model;
        return fragment(
            panel({
                className,
                mask: 'onLoad',
                tbar: [
                    recordActionBar({
                        actions: [model.addAction(), model.editAction()],
                        gridModel,
                        omit: readonly,
                        selModel: gridModel.selModel
                    }),
                    '-',
                    filterChooser({popover: true, flex: 1}),
                    '-',
                    switchInput({
                        bind: 'showInGroups',
                        label: 'Group by Category',
                        labelSide: 'left'
                    }),
                    '-',
                    colChooserButton()
                ],
                item: hframe(vframe(grid(), roleGraph()), detailsPanel())
            }),
            roleEditor(),
            recategorizeDialog()
        );
    }
});

const detailsPanel = hoistCmp.factory<RoleModel>(({model}) => {
    const {selectedRole} = model;
    return panel({
        compactHeader: true,
        icon: Icon.idBadge(),
        title: selectedRole?.name ? `Details - ${selectedRole.name}` : 'Details',
        item: roleDetails(),
        headerItems: [
            button({
                icon: Icon.edit(),
                minimal: true,
                onClick: () => model.editAsync(selectedRole),
                omit: !selectedRole || model.readonly
            })
        ],
        modelConfig: {
            defaultSize: '30%',
            minSize: 550,
            modalSupport: true,
            persistWith: {...RoleModel.PERSIST_WITH, path: 'detailsPanel'},
            side: 'right'
        }
    });
});