import { computed, defineComponent } from '@vue/composition-api';
import './index.scss';
import { fixStyle } from '@/lib/utils/dom';
import { useOperator, useStoreInject } from '@/lib/store';
import { Operator } from '@/lib/operator';
import { RowSelectionOperator } from '@/lib/operator/RowSelectionOperator';

enum CheckStatus {
    selected = 'selected',
    unselected = 'unselected',
    indeterminate = 'indeterminate',
    disabled = 'disabled',
}

export const HeaderSelectionCell = defineComponent({
    props: {
        width: {
            required: true,
            type: Number,
        },
        left: {
            required: true,
            type: Number,
        },
        height: {
            required: true,
            type: Number,
        },
    },
    name: 'HeaderSelectionCell',
    setup() {
        const rowSelectionOperator = useOperator<RowSelectionOperator>(Operator.rowSelection);
        const { state } = useStoreInject();
        const inputHandler = (value: boolean) => {
            if (value) {
                rowSelectionOperator.selectAll();
            } else {
                rowSelectionOperator.unSelectAll();
            }
        };
        const checkedStatus = computed(() => {
            const rowSelectionStatus = state.index.rowSelection;
            let hasSelected = false;
            let hasUnSelected = false;
            for (const key in rowSelectionStatus) {
                const selectionStatus = rowSelectionStatus[key];
                if (selectionStatus.display && !selectionStatus.disabled) {
                    if (selectionStatus.selected) {
                        hasSelected = true;
                    } else {
                        hasUnSelected = true;
                    }
                }
                if (hasSelected && hasUnSelected) return CheckStatus.indeterminate;
            }
            return hasSelected
                ? CheckStatus.selected
                : hasUnSelected
                ? CheckStatus.unselected
                : CheckStatus.disabled;
        });
        return {
            inputHandler,
            checkedStatus: checkedStatus,
            render: state.featureConfig.rowSelection.render,
        };
    },
    render() {
        const { left, width, height, inputHandler, checkedStatus, render } = this;
        return (
            <div
                class={'order-cell-box'}
                style={fixStyle({
                    left,
                    width,
                    height,
                    'line-height': height,
                })}
            >
                {render({
                    value: checkedStatus === CheckStatus.selected,
                    indeterminate: checkedStatus === CheckStatus.indeterminate,
                    // 灵活配置
                    disabled: checkedStatus === CheckStatus.disabled,
                    handler: {
                        input: inputHandler,
                    },
                })}
            </div>
        );
    },
});