import { isNumber } from 'lodash';
import { defineComponent, h } from '@vue/composition-api';
import { VNode } from 'vue';
import icon from '@/lib/icon/index.vue';
import { TREE_INDENT_PX } from '@/lib/constants/dom-buffer';
import './index.scss';
import { CellValue, IndexColumn } from '@/lib/types';
import {log} from "@/lib/utils/log";

export const TextCell = defineComponent({
    name: 'TextCell',
    functional: true,
    props: {
        text: {
            require: true,
            type: String,
        },
    },
    render(_h, { props }) {
        const { text } = props;
        return (
            <div class={'text-cell-box'}>
                <span class={'text-cell-content'}>{text || ''}</span>
            </div>
        );
    },
});

export const treeTextRender = (
    text: string,
    isTreeExpand: boolean,
    treeIndent: number | undefined,
    narrowTreeRowHandle: () => void,
    expandTreeRowHandle: () => void,
) => {
    const renderText = () => {
        const style = isNumber(treeIndent)
            ? {
                  'padding-left': `${treeIndent * TREE_INDENT_PX}px`,
              }
            : {};
        return h(
            'span',
            {
                class: {
                    'text-cell-content': true,
                },
                style,
            },
            text,
        );
    };
    const renderBox = (vNodes: VNode[]) =>
        h(
            'div',
            {
                class: {
                    'text-cell-box': true,
                    'text-tree-box': true,
                },
            },
            vNodes,
        );
    const expandIcon = h(icon, {
        class: {
            'tree-narrow': !isTreeExpand,
        },
        props: {
            name: 'angle-down-solid',
        },
        nativeOn: {
            click: (event) => {
                event.stopPropagation();
                if (isTreeExpand) {
                    narrowTreeRowHandle();
                } else {
                    expandTreeRowHandle();
                }
            },
        },
    });
    return renderBox([expandIcon, renderText()]);
};

export const textRender = (text: string, treeIndent: number | undefined) => {
    const renderText = () => {
        const style = isNumber(treeIndent)
            ? {
                  'padding-left': `${treeIndent * TREE_INDENT_PX}px`,
              }
            : {};
        return h(
            'span',
            {
                class: {
                    'text-cell-content': true,
                },
                style,
            },
            text,
        );
    };
    const renderBox = (vNodes: VNode[]) =>
        h(
            'div',
            {
                class: {
                    'text-cell-box': true,
                },
            },
            vNodes,
        );

    return renderBox([renderText()]);
};

export const customRender = (
    renderer: IndexColumn['renderer'],
    value: CellValue,
    rowData,
    rowId,
) => {
    log(`[render] [cellar] customRender`, rowId);
    const custom = renderer({ value, rowData, rowId });
    return h(
        'div',
        {
            class: {
                'text-cell-box': true,
            },
        },
        Array.isArray(custom) ? custom : [custom],
    );
};