import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useRef } from 'react';
import { createComponent } from '@meta-ui/core';
import { Type } from '@sinclair/typebox';
import { List as BaseList, ListItem as BaseListItem } from '@chakra-ui/react';
import { LIST_ITEM_EXP, LIST_ITEM_INDEX_EXP } from '../../constants';
import { parseType } from '../../utils/parseType';
import { ImplWrapper } from '../../services/ImplWrapper';
import { resolveAppComponents } from '../../services/resolveAppComponents';
export function parseTypeComponents(c) {
    return Object.assign(Object.assign({}, c), { parsedType: parseType(c.type), traits: c.traits.map(t => {
            return Object.assign(Object.assign({}, t), { parsedType: parseType(t.type) });
        }) });
}
const List = ({ listData, template, app, services, }) => {
    if (!listData) {
        return null;
    }
    const itemElementMemo = useRef(new Map());
    const parsedtemplete = template.map(parseTypeComponents);
    const listItems = listData.map((listItem, i) => {
        if (itemElementMemo.current.has(listItem.id)) {
            if (itemElementMemo.current.get(listItem.id).value === listItem) {
                return itemElementMemo.current.get(listItem.id).ele;
            }
        }
        const evaledTemplate = services.stateManager.mapValuesDeep({ parsedtemplete }, ({ value }) => {
            if (typeof value === 'string') {
                return services.stateManager.maskedEval(value, true, {
                    [LIST_ITEM_EXP]: listItem,
                    [LIST_ITEM_INDEX_EXP]: i,
                });
            }
            return value;
        }).parsedtemplete;
        const { topLevelComponents, slotComponentsMap } = resolveAppComponents(evaledTemplate, {
            services,
            app,
        });
        const componentElements = topLevelComponents.map(c => {
            return (_jsx(ImplWrapper, { component: c, slotsMap: slotComponentsMap.get(c.id), targetSlot: null, services: services, app: app }, c.id));
        });
        const listItemEle = (_jsx(BaseListItem, Object.assign({ spacing: 3 }, { children: componentElements }), listItem.id));
        itemElementMemo.current.set(listItem.id, {
            value: listItem,
            ele: listItemEle,
        });
        return listItemEle;
    });
    return _jsx(BaseList, { children: listItems }, void 0);
};
const PropsSchema = Type.Object({
    listData: Type.Array(Type.Record(Type.String(), Type.String())),
    template: Type.Array(Type.Any()),
});
const exampleProperties = {
    listData: [
        {
            id: '1',
            name: 'Bowen Tan',
        },
    ],
    template: [
        {
            id: 'listItemName-{{$listItem.id}}',
            type: 'core/v1/text',
            properties: {
                value: {
                    raw: 'Name：{{$listItem.name}}',
                    format: 'plain',
                },
            },
            traits: [],
        },
    ],
};
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'list',
        description: 'chakra-ui list',
        displayName: 'List',
        isDraggable: true,
        isResizable: true,
        exampleProperties,
        exampleSize: [6, 6],
    },
    spec: {
        properties: PropsSchema,
        methods: [],
        state: {},
        slots: [],
        styleSlots: [],
        events: [],
    },
})), { impl: List });
//# sourceMappingURL=List.js.map