import React, { useEffect, useRef } from 'react';
import ListColumn, { ListColumnProps } from "./ListColumn";
import { subscribeToOpenKey } from "../../SidebarButtonWithOverlay/SidebarButtonWithOverlay";

interface HoverColumnProps extends ListColumnProps {
    customClass?: string;
    rowKey?: string | number;
}

const HoverColumn = ({ children, customClass, rowKey }: HoverColumnProps) => {
    const divRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        return subscribeToOpenKey((key) => {
            // key format is "dataKey:rowKey" — only lock the matching row
            const isThisRow = key !== null && key.endsWith(`:${rowKey}`);
            divRef.current?.classList.toggle('locked', isThisRow);
        });
    }, [rowKey]);

    return (
        <ListColumn overflow='hidden'>
            <div ref={divRef} className={`hover-column ${customClass ?? ''}`}>
                <div className='ellipsis d-flex justify-content-between align-items-center'>
                    {children ?? '--'}
                </div>
            </div>
        </ListColumn>
    );
};

export default HoverColumn;