import { computed, defineComponent } from '@vue/composition-api';
import { createBodyRowRender } from '@/lib/components/body/column-row';
import { useStoreInject } from '@/lib/store';
import { createLRU } from '@/lib/utils/LRU';
import { isReason, RenderReason } from '@/lib/store/mark';
import { props } from '@/lib/components/body/group/props';
import {log} from "@/lib/utils/log";

export const CellsGrouper = defineComponent({
    name: 'CellsGrouper',
    props,
    emits: ['contextmenu'],
    setup() {
        const store = useStoreInject();

        const lruForRow = createLRU(30);

        return {
            lruForRow,
            data2DRecord: computed(() => store.state.index.data2D),
            rowRecord: computed(() => store.state.view.rowRecord),
            activeStatus: computed(() => store.state.activeStatus),
        };
    },
    render(h) {
        log('[render][group]');

        const {
            rowRecord,
            data2DRecord,
            activeRowIds,
            columns,
            width,
            pin,
            activeStatus,
            selectionArea,
            calculatingArea,
            calculatingDirection,
            lruForRow,
        } = this;

        // 当滚动引起的渲染可以使用 cache
        const rowRender = createBodyRowRender(h, false);
        const renderRow = (rowId: string) => {
            const key = `${pin}_${rowId}`;
            const rowTimeS = performance.now();

            if (isReason(RenderReason.preRender) && lruForRow.get(key)) {
                const row = lruForRow.get(key);
                log('[cost][rowsTimeS][row-hit]', rowId, performance.now() - rowTimeS);
                return row;
            }
            const row = rowRender(
                rowId,
                rowRecord[rowId].index,
                width,
                rowRecord[rowId].top,
                selectionArea,
                calculatingArea,
                calculatingDirection,
            )(
                columns,
                pin,
                rowRecord[rowId].height,
                activeStatus.dbClickedBodyCell,
                activeStatus.clickedBodyCell,
                data2DRecord[rowId],
            );
            lruForRow.set(key, row);
            log('[cost][rowsTimeS][row]', rowId, performance.now() - rowTimeS);
            return row;
        };
        const rowsTimeS = performance.now();
        const rows = activeRowIds.map(renderRow);
        log('[cost][rowsTimeS]', performance.now() - rowsTimeS);

        return h(
            'div',
            {
                class: {
                    'header-group-inner': true,
                },
            },
            [rows],
        );
    },
});