import { h } from 'vue';
import { ObjectShort } from './ObjectShort.js';
import { getKindGroups } from '../subobject-kinds.js';

export const PaneSubObjects = {
    props: ['store', 'kind', 'onFocusFO'],
    setup(props) {
        function focused() {
            const fp = props.store.focusPath;
            return fp.length ? fp[fp.length - 1] : props.store.scoreModel;
        }

        return () => {
            const node = focused();
            const groups = getKindGroups(node);
            const group = props.kind
                ? groups.find(g => g.kind === props.kind)
                : groups[0];
            const items = group?.items ?? [];

            if (!items.length) return h('div', null, h('em', null, 'No sub-objects'));

            return h('div', null,
                h('ul', { class: 'se-object-list' }, items.map((item, idx) =>
                    h(ObjectShort, {
                        key: idx,
                        label: item.label,
                        typeTag: item.kind,
                        focused: props.store.focusPath.includes(item.node),
                        hasChildren: item.hasChildren,
                        readOnly: item.readOnly ?? false,
                        onFocus:    () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
                        onDrillDown: () => { props.store.pushFocus(item.node); props.onFocusFO?.(); },
                    })
                ))
            );
        };
    },
};