import { forwardRef } from "react";
import { Resizable } from "react-resizable";
import "react-resizable/css/styles.css";

const ResizableComponent = forwardRef((props, ref) => {
  const { onResize, onResizeStart, onResizeStop, width, dragAttributes, dragListeners, ...restProps } = props;

  if (!width) {
    return <th ref={ref} {...restProps} {...(dragAttributes || {})} {...(dragListeners || {})} />;
  }

  return (
    <Resizable
      width={width}
      height={0}
      onResize={onResize}
      onResizeStart={onResizeStart}
      onResizeStop={onResizeStop}
      draggableOpts={{ enableUserSelectHack: false }}
      resizeHandles={["e"]}
      axis="x"
      handle={(axis, handleRef) => (
        <span
          ref={handleRef}
          className={`react-resizable-handle react-resizable-handle-${axis}`}
          onClick={(e) => e.stopPropagation()}
        />
      )}
    >
      <th ref={ref} {...restProps} {...(dragAttributes || {})} {...(dragListeners || {})} />
    </Resizable>
  );
});

ResizableComponent.displayName = "ResizableComponent";

export default ResizableComponent;
