import * as React from 'react';
import { Dropdown } from '../dropdown';
import { DropdownMenuTrigger } from './DropdownMenuTrigger';
import { DropdownMenuContent } from './DropdownMenuContent';
import type { DropdownMenuProps } from './types';

export const DropdownMenu: React.FC<DropdownMenuProps> = ({
  open,
  onOpenChange,
  children,
}) => {
  const [_internalOpen, setInternalOpen] = React.useState(false);
  const isControlled = open !== undefined;
  const handleOpenChange = (newOpen: boolean) => {
    if (!isControlled) {
      setInternalOpen(newOpen);
    }
    onOpenChange?.(newOpen);
  };

  const trigger = React.Children.toArray(children).find(
    (child) =>
      React.isValidElement(child) && child.type === DropdownMenuTrigger,
  );
  const content = React.Children.toArray(children).find(
    (child) =>
      React.isValidElement(child) && child.type === DropdownMenuContent,
  );

  if (!trigger || !content) {
    return <>{children}</>;
  }

  const resolvedOpen = isControlled ? open : _internalOpen;

  return (
    <Dropdown
      trigger={trigger}
      open={resolvedOpen}
      onOpenChange={handleOpenChange}
    >
      {React.isValidElement(content) ? content.props.children : content}
    </Dropdown>
  );
};