import { groupBy, reduce, forEach } from 'lodash';
import { defineComponent, PropType } from '@vue/composition-api';
import { IndexColumn } from '@/lib/types';
import { createHeaderGroupCell } from '@/lib/components/header/header-cell';
import { fixStyle } from '@/lib/utils/dom';
import {
    HEADER_COLUMN_ROW,
    HEADER_GROUP_INNER_BOX,
    HEADER_GROUP_ROW,
} from '@/lib/constants/dom-class';
import { GROUP_NONE } from '@/lib/constants/filler';
import {log} from "@/lib/utils/log";

export const HeaderGroup = defineComponent({
    functional: true,
    name: 'HeaderGroup',
    props: {
        level: {
            require: true,
            type: Number,
        },
        rowHeight: {
            require: true,
            type: Number,
        },
        columns: {
            type: Array as PropType<IndexColumn[]>,
            default: () => [],
        },
    },
    render(h, { props }) {
        log('[render] header-group render');
        const { columns, rowHeight, level } = props;
        const headerGroupCell = createHeaderGroupCell(h);

        const renderColumnGroupHeaders = (columns: IndexColumn[]) => {
            const columnGroup = groupBy(columns, 'group');
            return reduce(
                columnGroup,
                (acc, columns, key) => {
                    if (key === GROUP_NONE) return acc;
                    const title = columns?.[0].groupTitle || '';
                    let left = columns?.[0].left || 0;
                    let widthCount = 0;
                    forEach(columns, (column) => {
                        if (column.left < left) left = column.left;
                        widthCount = widthCount + column.width;
                    });
                    return [
                        ...acc,
                        headerGroupCell({
                            id: key,
                            left: left,
                            height: rowHeight,
                            width: widthCount,
                            title: title,
                            isGroup: true,
                        }),
                    ];
                },
                [],
            );
        };
        const renderColumnHeaders = (columns: IndexColumn[]) => {
            return columns.map((column: IndexColumn) =>
                headerGroupCell({
                    id: column.id,
                    left: column.left,
                    height: rowHeight,
                    width: column.width,
                    title: column.title,
                    isGroup: false,
                }),
            );
        };
        const columnGroupHeaders = renderColumnGroupHeaders(columns);
        return (
            <div class={HEADER_GROUP_INNER_BOX}>
                {columnGroupHeaders.length > 0 ? (
                    <div class={HEADER_GROUP_ROW} style={fixStyle({ height: rowHeight })}>
                        {renderColumnGroupHeaders(columns)}
                    </div>
                ) : null}

                <div
                    class={HEADER_COLUMN_ROW}
                    style={fixStyle({ top: (level - 1) * rowHeight, height: rowHeight })}
                >
                    {renderColumnHeaders(columns)}
                </div>
            </div>
        );
    },
});