import { defineComponent, PropType } from '@vue/composition-api';
import { CellEditor, CellValue, EditingData } from '@/lib/types';
import { Operator } from '@/lib/operator';
import { EditOperator } from '@/lib/operator/EditOperator';
import { useOperator } from '@/lib/store';
import {log} from "@/lib/utils/log";

export const EditorCell = defineComponent({
    name: 'EditorCell',
    props: {
        rowId: {
            require: true,
            type: String,
        },
        columnId: {
            require: true,
            type: String,
        },
        data: {
            require: true,
            type: Object as PropType<EditingData>,
        },
        editor: {
            require: true,
            type: [Function, Array] as PropType<CellEditor>,
        },
    },
    setup({ rowId, columnId }) {
        const editOperator = useOperator<EditOperator>(Operator.edit);
        const handleInput = (value: CellValue) => {
            editOperator.inputCell(rowId, columnId, value);
        };
        return {
            handleInput,
        };
    },
    render() {
        const { editor, data, handleInput } = this;
        log('[render]editor cell render');
        const handler = {
            input: handleInput,
        };
        return editor({ value: data.value, handler });
    },
});