import { defineComponent, PropType } from '@vue/composition-api';
import { BODY_CELL, BODY_CELL_HANDLE } from '@/lib/constants/dom-role';
import { EditingData, IndexColumn } from '@/lib/types';
import { fixStyle } from '@/lib/utils/dom';
import { TextCell } from '@/lib/components/body/cell/text-cell';
import { EditorCell } from '@/lib/components/body/cell/editor-cell';
import { CalculateCell } from '@/lib/components/body/cell/calculate-cell';
import './index.scss';
import { CELL_CLICKED, CELL_EDITABLE, CELL_EDITING } from '@/lib/constants/dom-class';
import {log} from "@/lib/utils/log";

export const GridBodyCell = defineComponent({
    functional: true,
    name: 'GridBodyCell',
    props: {
        rowIndex: {
            require: true,
            type: Number,
        },
        pin: {
            require: true,
            type: String as PropType<IndexColumn['pin']>,
        },
        columnIndex: {
            require: true,
            type: Number,
        },
        rowId: {
            require: true,
            type: String,
        },
        columnId: {
            require: true,
            type: String,
        },
        left: {
            require: true,
            type: Number,
        },
        width: {
            require: true,
            type: Number,
        },
        height: {
            require: true,
            type: Number,
        },
        data: {
            require: false,
            type: Object as PropType<EditingData>,
        },
        isEdit: {
            require: true,
            type: Boolean,
        },
        isActivated: {
            require: true,
            type: Boolean,
        },
        isShowHandle: {
            require: true,
            type: Boolean,
        },
        editor: {
            require: false,
            type: Object as PropType<IndexColumn['editor']>,
        },
        calculator: {
            require: false,
            type: Array as unknown as PropType<IndexColumn['calculator']>,
        },
        // TODO to String
        selectionClass: {
            require: false,
            type: Object as PropType<{
                selected: string;
                'selected-top': string;
                'selected-bottom': string;
                'selected-left': string;
                'selected-right': string;
            }>,
        },
    },
    render(h, { props }) {
        log(`[render][cell]${props.pin}-${props.rowId}-${props.columnId}`);
        const {
            rowId,
            columnId,
            left,
            width,
            height,
            data,
            selectionClass,
            isEdit,
            isActivated,
            isShowHandle,
            editor,
            calculator,
        } = props;
        const renderContent = () => {
            if (calculator) {
                return h(CalculateCell, { props: { columnId, rowId, calculator } });
            }
            if (editor && isEdit) {
                return h(EditorCell, {
                    props: {
                        columnId,
                        rowId,
                        config: editor,
                        data,
                    },
                });
            }
            return h(TextCell, {
                props: {
                    text: `${data.value || ''}`,
                },
            });
        };
        const renderHandle = () => {
            return h('div', {
                attrs: {
                    role: BODY_CELL_HANDLE,
                },
                class: {
                    'fill-handle': true,
                },
            });
        };

        return h(
            'div',
            {
                class: {
                    'grid-cell': true,
                    [CELL_CLICKED]: isActivated,
                    [CELL_EDITABLE]: editor,
                    [CELL_EDITING]: editor && isEdit,
                    ...selectionClass,
                },
                style: fixStyle({
                    left,
                    width,
                    height,
                    'line-height': height,
                }),
                attrs: {
                    'row-id': rowId,
                    'column-id': columnId,
                    role: BODY_CELL,
                },
            },
            [renderContent(), isShowHandle ? renderHandle() : null],
        );
    },
});