import { computed, defineComponent, PropType } from '@vue/composition-api';
import { IndexColumn, RowData } from '@/lib/types';
import { Cellar } from '@/lib/components/body/cell/cellar';
import { GroupLink, GroupPin } from '@/lib/types/group';
import { OrderCell } from '@/lib/components/body/cell/order-cell';
import { ORDER_COLUMN_KEY, SELECTION_COLUMN_KEY } from '@/lib/constants/filler';
import { BODY_ROW_CONTAINER } from '@/lib/constants/dom-class';
import { SelectionCell } from '@/lib/components/body/cell/selection-cell';
import { useOperator, useStoreInject } from '@/lib/store';
import { useWatchRowData } from '@/lib/composables/watch-row-data';
import { Operator } from '@/lib/operator';
import { RowSelectionOperator } from '@/lib/operator/RowSelectionOperator';
import { log } from '@/lib/utils/log';

/**
 * 仅仅左内容展示，将容易变化的 TOP 交给外部绑定样式（当滚动时，该组件不会被更新））
 */
export const Rower = defineComponent({
    name: 'GridableRower',
    props: {
        // 索引信息
        pin: {
            required: true,
            type: String as PropType<IndexColumn['pin']>,
        },
        id: {
            required: true,
            type: String,
        },
        index: {
            required: true,
            type: Number,
        },
        // 内容信息
        isSelectedTopEdge: {
            required: false,
            type: Boolean,
            default: false,
        },
        isSelectedBottomEdge: {
            required: false,
            type: Boolean,
            default: false,
        },
        isCalculatingTopEdge: {
            required: false,
            type: Boolean,
            default: false,
        },
        isCalculatingBottomEdge: {
            required: false,
            type: Boolean,
            default: false,
        },
        selectedLink: {
            type: String as PropType<GroupLink>,
        },
        selectedColumnIndexRange: {
            required: false,
            type: Array as PropType<number[]>,
            default: () => [] as number[],
        },
        calculatingColumnIndexRange: {
            required: false,
            type: Array as PropType<number[]>,
            default: () => [] as number[],
        },
        // 代管理的列信息
        clickedColumnId: {
            required: true,
            type: String,
        },
        dbClickedColumnId: {
            required: true,
            type: String,
        },
        // 该行拥有的列数据
        columns: {
            required: true,
            type: Array as PropType<IndexColumn[]>,
        },
        data: {
            required: true,
            type: Object as PropType<RowData>,
        },
        // 树相关信息
        treeHasChildren: {
            required: false,
            type: Boolean,
        },
        treeExpand: {
            required: false,
            type: Boolean,
        },
        treePath: {
            required: false,
            type: Array as PropType<string[]>,
        },
    },
    setup(props) {
        const { state } = useStoreInject();
        const rowSelectionOperator = useOperator<RowSelectionOperator>(Operator.rowSelection);
        const { disabled, display } = state.featureConfig.rowSelection;
        const selectionDisplay = useWatchRowData(props.id, state, false, display, (value) =>
            rowSelectionOperator.changeRowDisplay(props.id, value),
        );
        const selectionDisabled = useWatchRowData(props.id, state, false, disabled, (value) =>
            rowSelectionOperator.changeRowDisabled(props.id, value),
        );
        return {
            selectionDisplay,
            selectionDisabled,
            triggerRowSelection: () => rowSelectionOperator.triggerRow(props.id),
            isRowSelection: computed(() => state.index.rowSelection[props.id]?.selected),
            rowSelectionRender: state.featureConfig.rowSelection.render,
        };
    },
    mounted() {
        log('[rower][test]mounted', this.pin, this.id);
    },
    render(h) {
        log(`[render][rower]${this.pin}_${this.id}`);
        const {
            pin,
            id,
            index,
            // 内容信息
            isSelectedTopEdge,
            isSelectedBottomEdge,
            isCalculatingTopEdge,
            isCalculatingBottomEdge,
            selectedColumnIndexRange,
            calculatingColumnIndexRange,
            selectedLink,
            // 代管理的列信息
            clickedColumnId,
            dbClickedColumnId,
            // 该行拥有的列数据
            columns,
            data,
            // 树型数据相关信息
            treeHasChildren,
            treeExpand,
            treePath,
            // 行选择框逻辑
            selectionDisplay,
            selectionDisabled,
            isRowSelection,
            rowSelectionRender,
            triggerRowSelection,
        } = this;

        const getSelectionProps = (columnIndex: number) => {
            if (!selectedColumnIndexRange || selectedColumnIndexRange?.length !== 2) {
                return {};
            }
            const [start, end] = selectedColumnIndexRange;
            const isLinkLeft = () => {
                if (pin === GroupPin.scroll && ['left', 'all'].includes(selectedLink)) return true;
                return pin === GroupPin.right && selectedLink === 'scroll';
            };
            const isLinkRight = () => {
                if (pin === GroupPin.scroll && ['right', 'all'].includes(selectedLink))
                    return true;
                return pin === GroupPin.left && selectedLink === 'scroll';
            };
            if (columnIndex <= end && columnIndex >= start) {
                const isSelectedRightEdge = !isLinkRight() && end === columnIndex;
                return {
                    isSelected: true,
                    isSelectedTopEdge,
                    isSelectedBottomEdge,
                    isSelectedLeftEdge: !isLinkLeft() && start === columnIndex,
                    isSelectedRightEdge,
                };
            }
            return {};
        };

        const getCalculatingProps = (columnIndex: number) => {
            if (!calculatingColumnIndexRange || calculatingColumnIndexRange?.length !== 2) {
                return {};
            }
            const [start, end] = calculatingColumnIndexRange;
            if (columnIndex <= end && columnIndex >= start) {
                return {
                    isCalculating: true,
                    isCalculatingTopEdge,
                    isCalculatingBottomEdge,
                    isCalculatingLeftEdge: start === columnIndex,
                    isCalculatingRightEdge: end === columnIndex,
                };
            }
            return {};
        };
        const orderCellRender = (column: IndexColumn) => {
            return h(OrderCell, {
                key: `${id}_${column.id}`,
                props: {
                    index,
                    left: column.left,
                    width: column.width,
                    height: column.height,
                },
            });
        };

        const selectionCellRender = (column: IndexColumn) => {
            if (!selectionDisplay.value) return null;
            return h(SelectionCell, {
                key: `${id}_${column.id}`,
                props: {
                    index,
                    left: column.left,
                    width: column.width,
                    height: column.height,
                    isChecked: isRowSelection,
                    inputHandler: triggerRowSelection,
                    render: rowSelectionRender,
                    disabled: selectionDisabled.value,
                },
            });
        };

        const renderCells = () => {
            return columns.map((indexColumn: IndexColumn) => {
                const columnId = indexColumn.id;
                const columnIndex = indexColumn.index;
                const isTreeExpand =
                    indexColumn.isFirst && treeHasChildren ? treeExpand : undefined;
                const treeIndent = indexColumn.isFirst ? treePath?.length : undefined;

                if (indexColumn.field === ORDER_COLUMN_KEY) {
                    return orderCellRender(indexColumn);
                }

                if (indexColumn.field === SELECTION_COLUMN_KEY) {
                    return selectionCellRender(indexColumn);
                }
                return h(Cellar, {
                    props: {
                        pin,
                        rowIndex: index,
                        columnIndex: indexColumn.index,
                        rowId: id,
                        columnId: indexColumn.id,
                        left: indexColumn.left,
                        width: indexColumn.width,
                        height: indexColumn.height,
                        data: data.fieldData[columnId],
                        editor: indexColumn.editor,
                        calculator: indexColumn.calculator,
                        renderer: indexColumn.renderer,
                        formatter: indexColumn.formatter,
                        fillHandle: indexColumn.fillHandle,
                        customClass: indexColumn.customClass,
                        isTreeExpand,
                        treeIndent,
                        isEdit: indexColumn.editor && dbClickedColumnId === columnId,
                        isActivated: clickedColumnId === columnId,
                        ...getSelectionProps(columnIndex),
                        ...getCalculatingProps(columnIndex),
                    },
                });
            });
        };

        return h(
            'div',
            {
                class: {
                    [BODY_ROW_CONTAINER]: true,
                },
            },
            renderCells(),
        );
    },
});