import { useContext } from 'react';

import useFileInput from '@/app/(root)/create/createV2/componentsQ3/useFileInput';
import UploadStateContext from '@/app/(root)/create/uploaderV2/UploadStateContext';
import CreateFormContext from '@/app/(root)/create/v2/CreateFormContext';
import { CreateFormModals } from '@/app/(root)/create/v2/types';
import {
  ContextMenuItem,
  ContextMenuTrigger,
} from '@/components/contextMenu/ContextMenu';
import { Tooltip } from '@/components/tooltip/Tooltip';
import { useContextSelector } from '@/hooks/useContextSelector';
import { MicrophoneIcon, PlusIcon, UploadIcon } from '@/icons';

import { useChatMessagesStore } from '../../stores';
import { ActionButton, ActionButtonProps } from './ActionButton';

export const ActionButtonMenuNew: React.FC<ActionButtonProps> = () => {
  const setActiveModal = useContextSelector(
    CreateFormContext,
    (context) => context.setActiveModal
  );
  //const { setIsLibraryModalOpen } = useChatContext();
  const uploadState = useContext(UploadStateContext);
  const openFileInput = useFileInput({
    onFileSelect: () => {
      setActiveModal(CreateFormModals.AudioUpload);
      uploadState?.setIsUploadInProgress(true);
    },
  });
  const { msgIds, loadedMessages } = useChatMessagesStore();
  const hasMessages = msgIds.length > 0 || (loadedMessages?.length ?? 0) > 0;
  return (
    <ContextMenuTrigger
      placement={hasMessages ? 'top-right' : 'bottom-right'}
      ButtonComponent={(props) => (
        <Tooltip label='Upload or Record' placement='top'>
          <ActionButton
            icon={PlusIcon}
            aria-label='Add audio - upload, record, or choose from library'
            {...props}
          />
        </Tooltip>
      )}
      ContentsComponent={({ onClose }: { onClose: () => void }) => (
        <>
          <ContextMenuItem
            onClick={() => {
              openFileInput();
              onClose();
            }}
            icon={<UploadIcon />}
          >
            Upload
          </ContextMenuItem>
          <ContextMenuItem
            onClick={() => {
              setActiveModal(CreateFormModals.AudioRecord);
              uploadState?.setIsUploadInProgress(true);
              onClose();
            }}
            icon={<MicrophoneIcon />}
          >
            Record
          </ContextMenuItem>
          {/*session.isStaff ? (
            <ContextMenuItem
              onClick={() => {
                setIsLibraryModalOpen(true);
                onClose();
              }}
              icon={<LibraryIcon />}
            >
              Library
            </ContextMenuItem>
          ) : null*/}
        </>
      )}
    />
  );
};