/**
 * Splitter Component
 * A simple resizable splitter for layout panels
 */
Vue.component('splitter', {
    props: {
        initialLeftWidth: {
            type: Number,
            default: 400
        },
        minLeftWidth: {
            type: Number,
            default: 200
        },
        maxLeftWidth: {
            type: Number,
            default: 800
        },
        unlimitedMax: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            leftWidth: this.initialLeftWidth,
            dragging: false,
            startX: 0,
            startWidth: 0
        };
    },
    mounted() {
        document.addEventListener('mousemove', this.onMouseMove);
        document.addEventListener('mouseup', this.onMouseUp);
        
        // Apply initial width
        const leftPanel = this.$refs.leftPanel;
        if (leftPanel) {
            leftPanel.style.width = `${this.leftWidth}px`;
            leftPanel.style.minWidth = `${this.minLeftWidth}px`;
            if (!this.unlimitedMax) {
                leftPanel.style.maxWidth = `${this.maxLeftWidth}px`;
            } else {
                leftPanel.style.maxWidth = 'none';
            }
        }
    },
    beforeDestroy() {
        document.removeEventListener('mousemove', this.onMouseMove);
        document.removeEventListener('mouseup', this.onMouseUp);
    },
    methods: {
        onMouseDown(event) {
            this.dragging = true;
            this.startX = event.clientX;
            this.startWidth = this.leftWidth;
            event.preventDefault();
        },
        onMouseMove(event) {
            if (!this.dragging) return;
            
            const dx = event.clientX - this.startX;
            let newWidth = this.startWidth + dx;
            newWidth = Math.max(this.minLeftWidth, newWidth);
            if (!this.unlimitedMax) {
                newWidth = Math.min(this.maxLeftWidth, newWidth);
            }
            
            this.leftWidth = newWidth;
            this.$refs.leftPanel.style.width = `${newWidth}px`;
            event.preventDefault();
        },
        onMouseUp() {
            this.dragging = false;
        }
    },
    template: `
        <div class="splitter-container" style="display: flex; height: auto; min-height: 100%;">
            <div ref="leftPanel" class="left-panel" style="height: auto; min-height: 100%; flex-shrink: 0; overflow-y: visible; overflow-x: auto;">
                <slot name="left"></slot>
            </div>
            <div 
                class="splitter-handle" 
                @mousedown="onMouseDown" 
                style="width: 5px; cursor: ew-resize; background-color: #C0C0C0; height: auto; min-height: 100%; position: relative; z-index: 10;"
            >
                <div class="splitter-handle-grip" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 50px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
                    <div style="width: 4px; height: 20px; background-color: white; margin: 2px 0;"></div>
                    <div style="width: 4px; height: 20px; background-color: white; margin: 2px 0;"></div>
                </div>
            </div>
            <div class="right-panel" style="flex-grow: 1; height: auto; min-height: 100%; overflow-y: visible; overflow-x: auto; padding-left: 10px;">
                <slot name="right"></slot>
            </div>
        </div>
    `
}); 