import { isFunction } from 'lodash';
import { CreateElement, VNode } from 'vue';
import { COLUMN_RESIZER, HEADER_CELL } from '@/lib/constants/dom-role';
import { fixStyle } from '@/lib/utils/dom';
import { HEADER_COLUMN_TITLE } from '@/lib/constants/dom-class';
import { SELECTION_COLUMN_KEY } from '@/lib/constants/filler';
import { HeaderSelectionCell } from '@/lib/components/header/header-selection-cell';

export const createHeaderGroupCell =
    (h: CreateElement) =>
    ({
        id,
        left,
        width,
        height,
        title,
        isGroup,
    }: {
        id: string;
        left: number;
        width: number;
        height: number;
        title: string | (() => VNode | VNode[]);
        isGroup: boolean;
    }) => {
        if (SELECTION_COLUMN_KEY === id) {
            return h(HeaderSelectionCell, {
                props: {
                    left,
                    width,
                    height,
                },
            });
        }
        const theTitle = isFunction(title) ? title() : title;
        const columnResizer = h(
            'div',
            {
                class: {
                    resizer: true,
                },
                attrs: {
                    role: COLUMN_RESIZER,
                },
            },
            [],
        );
        const titleBox = h(
            'span',
            {
                class: {
                    [HEADER_COLUMN_TITLE]: true,
                },
            },
            [theTitle],
        );
        return h(
            'div',

            {
                key: id,
                class: {
                    'header-cell': true,
                },
                style: fixStyle({
                    left,
                    width,
                    height,
                }),
                attrs: {
                    id,
                    role: HEADER_CELL,
                },
            },
            [titleBox, isGroup ? null : columnResizer],
        );
    };