import { withDefaults, inject, h, VNode, Slot, toValue, Ref, computed } from "vue";
import { PROVIDE_TABLE, EXPAND_ROW } from "../plugins/core/type";
import { Checkbox } from 'ant-design-vue';


interface RowIndexProps {
    type?: 'th' | 'td',
    rowindex?: number,
    rowspan?: number,
    record?: Object
}

function RowExpanded (props: RowIndexProps, { attrs, emit, slots }){
    const TABLE: any = inject(PROVIDE_TABLE);

    return h(
        props.type || 'td',
        {
            class: {
                'row-expanded': true,
                sticky: ![undefined, false].includes(TABLE.props.stickyExpandedRow),
                'sticky-left-extend': TABLE.props.stickyExpandedRow,
                'sticky-left-index': ![undefined, false].includes(TABLE.props.stickyIndex) && TABLE.props.showRowIndex,
                'sticky-left-chosed': TABLE.props.rowSelection?.fixed,
            },
            rowspan: props.rowspan,
            onMousedown: () => TABLE.selectRowsMousedown(props.rowindex)
        },
        {
            default: slots.default,
        }
    )
}

function RowIndex(props: RowIndexProps, { attrs, emit, slots }){
        
    const TABLE: any = inject(PROVIDE_TABLE);
    const EXPAND = props.type === 'th' ? null : inject(EXPAND_ROW) as Ref;

    return h(
        props.type || 'td',
        {
            class: {
                'row-index': true,
                sticky: ![undefined, false].includes(TABLE.props.stickyIndex),
                'sticky-left-index': ![undefined, false].includes(TABLE.props.stickyIndex),
                'sticky-left-chosed': TABLE.props.rowSelection?.fixed,
            },
            rowspan: props.rowspan,
            'data-rowindex': props.rowindex,
            onMousedown: props.type === 'th' ? undefined : () => TABLE.selectRowsMousedown(props.rowindex)
        },
        [
            slots.default?.(),
            (EXPAND?.value || props.type === 'th') ? null : slots.headerRowindex?.() || (TABLE.props.showRowIndex ? props.rowindex + 1 : '')
        ]
    )
}


function RowCheckbox (props: RowIndexProps, { attrs, emit, slots }){
    const TABLE: any = inject(PROVIDE_TABLE);
    const hasDefaultSlot = slots.default?.()[0].children.length

    return h(
        props.type || 'td',
        {
            class: {
                'row-check': true,
                sticky: TABLE.props.rowSelection?.fixed,
                'sticky-left-chosed': TABLE.props.rowSelection?.fixed,
            },
            rowspan: props.rowspan,
            onClick: (e) => e.stopPropagation(),
            onDblclick: (e) => e.stopPropagation(),
        },
        [
            hasDefaultSlot ? slots.default?.() : h(Checkbox, {
                value: (props.type === 'th' || !props.record) ? undefined : props.record[TABLE.props.rowKey],
                disabled: (props.type === 'th' || !props.record) ? undefined : toValue(TABLE.disabeldCheckedRowKeys).includes(props.record[TABLE.props.rowKey]),
                checked: (props.type === 'th' || !props.record) ? toValue(TABLE.rowsCheckAll) : TABLE.rowIsSelection(props.record),
                indeterminate: props.type === 'th' ? toValue(TABLE.rowsIndeterminate) : undefined,
                onChange: () => (props.type === 'th' || !props.record) ? TABLE.selectAllRowHandel() : TABLE.selectRowHandel(props.record, props.rowindex),
            })
        ]
    )
}

export default function useComponents() {
    return {
        RowIndex,
        RowExpanded,
        RowCheckbox
    }
}