import React, { PropsWithChildren, ReactNode } from 'react';
import { ResizableBox, ResizableBoxProps, ResizeCallbackData } from 'react-resizable';

import 'react-resizable/css/styles.css';

export type Size = ResizeCallbackData['size'];

export default function ResizablePanel({
  children,
  heading = undefined,
  initialSize = { width: 500, height: 300 },
  minConstraints = [100, 100] as [number, number],
  onResize,
  ...props
}: PropsWithChildren<Omit<ResizableBoxProps, 'width' | 'height'>> & {
  heading?: ReactNode;
  initialSize?: Size;
}) {
  const { width, height } = initialSize;
  return (
    <ResizableBox
      className="panel"
      width={width}
      height={height}
      minConstraints={minConstraints}
      onResize={
        onResize
          ? (e, data) => {
              const { size } = data;
              onResize(e, { ...data, size });
            }
          : undefined
      }
      {...props}
    >
      {heading ? <div className="panel-heading">{heading}</div> : null}
      <div className="panel-body">{children}</div>
    </ResizableBox>
  );
}