import { markRaw, reactive } from '@vue/composition-api';
import { GroupPin } from '@/lib/types/group';
import { AndOr, DragDirection } from '@/lib/types';
import { StoreState } from '@/lib/store/types';
import { ID_KEY } from '@/lib/constants/default-props';

export const createState = () =>
    reactive<StoreState>({
        index: {
            columnRecord: {},

            columnGroupRecord: {
                left: markRaw({
                    width: 0,
                    ids: [],
                }),
                right: markRaw({ width: 0, ids: [] }),
                scroll: markRaw({ width: 0, ids: [] }),
            },

            columnId2Index: {},
            columnId2Field: {},

            rowIndex2Id: [],
            rowRecord: {},

            // 值索引
            data2D: {},

            rowSelection: {},
        },
        view: {
            rowRecord: {},
            rowIndex2Id: [],
        },
        featureConfig: {
            treeData: { active: false },
            rowSelection: { active: false },
            rowIndex: { active: false },
            totalBar: { active: false },
        },
        config: {
            autoHeight: false,
            width: 0,
            height: 0,
            rowHeight: 0,
            bodyHeight: 0,
            bodyViewHeight: 0,
            headerHeight: 0,
            headerGroupLevel: 0,
            scrollViewLeft: 0,
            idKey: ID_KEY,
        },
        columnTotal: {},
        virtualScroll: {
            y: {
                startIndex: 0,
                endIndex: 0,
            },
            xStartLeft: 0,
            xEndLeft: 0,
        },
        activeStatus: {
            clickedBodyCell: null,
            dbClickedBodyCell: null,
        },
        selectionStatus: {
            active: false,
            changing: false,
            startRowIndex: -1,
            endRowIndex: -1,
            startColumn: markRaw({
                index: -1,
                pin: GroupPin.scroll,
            }),
            endColumn: markRaw({
                index: -1,
                pin: GroupPin.scroll,
            }),
            rightArea: {
                hit: false,
            },
            leftArea: {
                hit: false,
            },
            scrollArea: {
                hit: false,
            },
        },
        dragCalculateStatus: {
            active: false,
            changing: false,
            direction: DragDirection.top,
            startRowIndex: -1,
            endRowIndex: -1,
            startColumn: markRaw({
                index: -1,
                pin: GroupPin.scroll,
            }),
            endColumn: markRaw({
                index: -1,
                pin: GroupPin.scroll,
            }),
            rightArea: {
                hit: false,
            },
            leftArea: {
                hit: false,
            },
            scrollArea: {
                hit: false,
            },
        },
        rightMenu: {
            active: false,
            top: -1,
            left: -1,
        },
        filter: markRaw({
            andOr: AndOr.or,
            filters: {},
        }),
    });