import { defineComponent, watch } from '@vue/composition-api';
import './index.scss';
import { fixStyle, flexWidth } from '../../utils/dom';
import { BOTTOM_SCROLL_HEIGHT, SCROLL_WIDTH } from '@/lib/constants/dom-fixed';
import {log} from "@/lib/utils/log";

export const BottomScroll = defineComponent({
    name: 'BottomScroll',
    emits: ['scroll'],
    props: {
        leftWidth: {
            required: true,
            type: Number,
        },
        scrollLeft: {
            required: true,
            type: Number,
        },
        scrollWidth: {
            required: true,
            type: Number,
        },
        rightWidth: {
            required: true,
            type: Number,
        },
    },
    setup(props, ctx) {
        watch(
            () => props.scrollLeft,
            (left: number) => {
                (ctx.refs['scroll'] as Element).scrollLeft = left;
            },
        );
        return {
            onScroll: (e: PointerEvent) => ctx.emit('scroll', e),
        };
    },
    render() {
        log(`[render] bottom-scroll render`);
        const { leftWidth, scrollWidth, rightWidth, onScroll } = this;
        const widthHeight = (width: number) => ({
            height: BOTTOM_SCROLL_HEIGHT,
            ...flexWidth(width),
        });
        return (
            <div class={'grid-bottom-scroll'}>
                <div class={'pin-left'} style={fixStyle(widthHeight(leftWidth))} />
                <div
                    ref='scroll'
                    class={'scroll gridable-scroll'}
                    style={fixStyle({ height: BOTTOM_SCROLL_HEIGHT })}
                    onScroll={onScroll}
                >
                    <div class={'scroll-content'} style={fixStyle(widthHeight(scrollWidth))} />
                </div>
                <div
                    class={'pin-right'}
                    style={fixStyle(widthHeight(rightWidth + SCROLL_WIDTH))}
                />
            </div>
        );
    },
});