import { defineComponent, PropType } from '@vue/composition-api';
import { fixStyle, flexWidth } from '../../utils/dom';
import { HeaderGroup } from '@/lib/components/header/header-group';
import { IndexColumn } from '@/lib/types';
import './index.scss';
import { SCROLL_WIDTH } from '@/lib/constants/dom-fixed';
import {log} from "@/lib/utils/log";

export const GridHeader = defineComponent({
    functional: true,
    name: 'GridHeader',
    props: {
        rowHeight: {
            require: true,
            type: Number,
        },
        rowLevel: {
            require: true,
            type: Number,
        },
        leftWidth: {
            require: true,
            type: Number,
        },
        rightWidth: {
            require: true,
            type: Number,
        },
        scrollWidth: {
            require: true,
            type: Number,
        },
        leftColumns: {
            require: true,
            type: Array as PropType<IndexColumn[]>,
        },
        rightColumns: {
            require: true,
            type: Array as PropType<IndexColumn[]>,
        },
        scrollColumns: {
            require: true,
            type: Array as PropType<IndexColumn[]>,
        },
        scrollLeft: {
            require: true,
            type: Number,
        },
        height: {
            require: true,
            type: Number,
        },
    },
    render(_, { props }) {
        log('[render] header render');
        const {
            height,
            rowHeight,
            rowLevel,
            scrollLeft,

            leftColumns,
            rightColumns,
            scrollColumns,

            leftWidth,
            rightWidth,
            scrollWidth,
        } = props;
        const getGroupStyle = (width: number) => fixStyle({ ...flexWidth(width), height });
        return (
            <div class={'grid-header'}>
                <div class={'grid-header-item header-pin-left'} style={getGroupStyle(leftWidth)}>
                    {leftColumns.length > 0 ? (
                        <HeaderGroup
                            level={rowLevel}
                            rowHeight={rowHeight}
                            columns={leftColumns}
                        />
                    ) : null}
                </div>
                <div class={'grid-header-item grid-header-view'}>
                    <div
                        class={'grid-header-item-scroll'}
                        style={{
                            ...getGroupStyle(scrollWidth),
                            transform: `translateX(${-scrollLeft}px)`,
                        }}
                    >
                        {scrollColumns.length > 0 ? (
                            <HeaderGroup
                                level={rowLevel}
                                rowHeight={rowHeight}
                                columns={scrollColumns}
                            />
                        ) : null}
                    </div>
                </div>

                <div
                    class={'grid-header-item header-pin-right'}
                    style={getGroupStyle(rightWidth + SCROLL_WIDTH)}
                >
                    {rightColumns.length > 0 ? (
                        <HeaderGroup
                            level={rowLevel}
                            rowHeight={rowHeight}
                            columns={rightColumns}
                        />
                    ) : null}
                </div>
            </div>
        );
    },
});