import { isBoolean } from 'lodash';
import { computed, defineComponent } from '@vue/composition-api';
import { BODY_CELL, BODY_CELL_HANDLE } from '@/lib/constants/dom-role';
import { CellType } from '@/lib/types';
import { fixStyle } from '@/lib/utils/dom';
import { customRender, textRender, treeTextRender } from '@/lib/components/body/cell/text-cell';
import { EditorCell } from '@/lib/components/body/cell/editor-cell';
import { CalculateCell } from '@/lib/components/body/cell/calculate-cell';
import './index.scss';
import {
    CELL_CALCULATING,
    CELL_CALCULATING_BOTTOM,
    CELL_CALCULATING_LEFT,
    CELL_CALCULATING_RIGHT,
    CELL_CALCULATING_TOP,
    CELL_CLICKED,
    CELL_EDITABLE,
    CELL_EDITING,
    CELL_SELECTED,
    CELL_SELECTED_BOTTOM,
    CELL_SELECTED_LEFT,
    CELL_SELECTED_RIGHT,
    CELL_SELECTED_TOP,
} from '@/lib/constants/dom-class';
import { useOperator, useStoreInject } from '@/lib/store';
import { useTree } from '@/lib/services/tree';
import { getCurrentRowData } from '@/lib/calculate';
import { props } from './props';
import { Operator } from '@/lib/operator';
import { TreeOperator } from '@/lib/operator/TreeOperator';
import { log } from '@/lib/utils/log';

export const Cellar = defineComponent({
    name: 'GridableCellar',
    props,
    setup({ rowId }) {
        const { state } = useStoreInject();
        const treeOperator = useOperator<TreeOperator>(Operator.tree);
        const { narrowTreeRow, expandTreeRow } = useTree(treeOperator);

        return {
            narrowTreeRow: () => narrowTreeRow(rowId),
            expandTreeRow: () => expandTreeRow(rowId),
            rowData: computed(() =>
                getCurrentRowData(state.index.data2D[rowId], state.index.columnId2Field),
            ),
        };
    },
    render(h) {
        const {
            // 索引信息
            pin,
            rowId,
            columnId,
            // UI 信息
            left,
            width,
            height,
            // 树行信息
            isTreeExpand,
            treeIndent,
            narrowTreeRow,
            expandTreeRow,
            // 选中状态
            isEdit,
            isActivated,
            isSelected,
            isSelectedTopEdge,
            isSelectedBottomEdge,
            isSelectedLeftEdge,
            isSelectedRightEdge,
            isCalculating,
            isCalculatingTopEdge,
            isCalculatingBottomEdge,
            isCalculatingLeftEdge,
            isCalculatingRightEdge,
            // 数据信息
            data,
            editor,
            calculator,
            formatter,
            renderer,
            rowData,
            // 功能开关
            fillHandle,
            customClass,
        } = this;
        log(`[render] [cellar] self`, rowId, columnId);
        const editable = data.type === CellType.editor && editor;
        const renderContent = () => {
            if (data.type === CellType.calculator && calculator) {
                return h(CalculateCell, {
                    props: {
                        columnId,
                        rowId,
                        calculator,
                        formatter,
                        renderer: (value) => renderer({ value, rowData, rowId }),
                        data,
                    },
                });
            }
            if (editable && isEdit) {
                return h(EditorCell, {
                    props: {
                        columnId,
                        rowId,
                        editor,
                        data,
                    },
                });
            }
            const text = formatter ? formatter(data.value) : `${data.value || ''}`;

            if (isBoolean(isTreeExpand)) {
                return treeTextRender(
                    text,
                    isTreeExpand,
                    treeIndent,
                    narrowTreeRow,
                    expandTreeRow,
                );
            }
            if (renderer) {
                return customRender(renderer, data.value, rowData, rowId);
            }
            return textRender(text, treeIndent);
        };
        const renderHandle = () => {
            return h('div', {
                attrs: {
                    role: BODY_CELL_HANDLE,
                },
                class: {
                    'fill-handle': true,
                },
            });
        };

        const isShowHandle =
            fillHandle && ((isSelectedBottomEdge && isSelectedRightEdge) || isActivated);

        return h(
            'div',
            {
                class: {
                    'grid-cell': true,
                    [customClass]: !!customClass,
                    [CELL_CLICKED]: isActivated,
                    [CELL_SELECTED]: isSelected,
                    [CELL_SELECTED_TOP]: isSelectedTopEdge,
                    [CELL_SELECTED_BOTTOM]: isSelectedBottomEdge,
                    [CELL_SELECTED_LEFT]: isSelectedLeftEdge,
                    [CELL_SELECTED_RIGHT]: isSelectedRightEdge,
                    [CELL_CALCULATING]: isCalculating,
                    [CELL_CALCULATING_TOP]: isCalculatingTopEdge,
                    [CELL_CALCULATING_BOTTOM]: isCalculatingBottomEdge,
                    [CELL_CALCULATING_LEFT]: isCalculatingLeftEdge,
                    [CELL_CALCULATING_RIGHT]: isCalculatingRightEdge,
                    [CELL_EDITABLE]: editable,
                    [CELL_EDITING]: editable && isEdit,
                },
                style: fixStyle({
                    left,
                    width,
                    height,
                    'line-height': height,
                }),
                attrs: {
                    'row-id': rowId,
                    'column-id': columnId,
                    pin: pin,
                    role: BODY_CELL,
                },
            },
            [renderContent(), isShowHandle ? renderHandle() : null],
        );
    },
});