import { ComponentProps } from 'react';

import Button, {
  BaseButtonProps,
  ButtonShape,
  ButtonSize,
  ButtonVariant,
} from '@/components/button/Button';
import { ClipContextProvider } from '@/components/clipBrowser/ClipContext';
import { MoreMenuContents } from '@/components/clipBrowser/ClipMenus';
import { AutoClipPlaybackProvider } from '@/components/clipBrowser/useClipPlayback';
import { ContextMenuTrigger } from '@/components/contextMenu/ContextMenu';
import { MenuContextProvider } from '@/components/song/newActions/MenuContext';
import MoreVerticalIcon from '@/icons/generated/MoreVerticalIcon';
import { Clip } from '@/state/clipStore';

type SongMenuProps = Partial<BaseButtonProps & ComponentProps<'button'>> & {
  clip: Clip;
  sectionName?: string;
  onOpenChange?: (open: boolean) => void;
};

export const SongMenuWithContext = ({
  clip,
  sectionName,
  onOpenChange,
  ...buttonProps
}: SongMenuProps) => {
  return (
    <ClipContextProvider clip={clip}>
      <MenuContextProvider value={{ sectionName }}>
        <AutoClipPlaybackProvider clip={clip}>
          <ContextMenuTrigger
            ButtonComponent={(triggerProps) => (
              <Button
                icon={MoreVerticalIcon}
                variant={ButtonVariant.Tertiary}
                size={ButtonSize.Mini}
                shape={ButtonShape.Rounded}
                {...buttonProps}
                {...triggerProps}
                aria-label='More menu contents'
              />
            )}
            ContentsComponent={MoreMenuContents}
            onOpenChange={onOpenChange}
          />
        </AutoClipPlaybackProvider>
      </MenuContextProvider>
    </ClipContextProvider>
  );
};