import { Popover } from '@base-ui/react/popover';
import cs from 'classnames';
import classes from './MessageInputPanelH5.module.scss';

type PanelSize = 'full' | 'inset';

interface MessageInputPanelH5Props {
  open: boolean;
  anchorElement?: HTMLElement | null;
  offset?: number;
  size?: PanelSize;
  onOpenChange?: (open: boolean) => void;
  children: React.ReactNode;
}

function MessageInputPanelH5({
  open,
  anchorElement,
  offset = 8,
  size = 'full',
  onOpenChange,
  children,
}: MessageInputPanelH5Props) {
  return (
    <Popover.Root open={open} onOpenChange={onOpenChange} modal={false}>
      <Popover.Portal>
        <Popover.Positioner
          className={classes['message-input-panel-h5__positioner']}
          side="top"
          align="center"
          sideOffset={offset}
          collisionPadding={8}
          anchor={anchorElement ?? undefined}
        >
          <Popover.Popup
            initialFocus={false}
            finalFocus={false}
            keepMounted
            className={cs(classes['message-input-panel-h5__popup'], {
              [classes['message-input-panel-h5__popup--full']]: size === 'full',
              [classes['message-input-panel-h5__popup--inset']]: size === 'inset',
            })}
          >
            {children}
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

export { MessageInputPanelH5 };