import { observer } from 'mobx-react-lite';
import { useCallback } from 'react';

import { FocusedObjectContext } from '@/app/(root)/create/v2/useFocusedObject';
import Draggable, {
  useClipDraggedObject,
} from '@/app/(root)/dragAndDrop/Draggable';
import useClip from '@/hooks/useClip';
import { useContextSelector } from '@/hooks/useContextSelector';
import { MoreHorizontalIcon } from '@/icons';

import Button, { ButtonShape } from '../button/Button';
import {
  ContextMenuTrigger,
  RightClickMenuTrigger,
} from '../contextMenu/ContextMenu';
import { NullableClipContextProvider } from './ClipContext';
import {
  ClipDetailsWrapper,
  ClipExactTags,
  ClipImage,
  ClipRowGroup,
  ClipRowHeightShort,
  ClipRowWrapper,
  ClipTitle,
} from './ClipElements';
import { MoreMenuContents } from './ClipMenus';
import useClipPlayback, { ClipPlaybackProvider } from './useClipPlayback';

export const JustCreatedClipRow = observer(({ clipId }: { clipId: string }) => {
  const { clip } = useClip(clipId);
  const clipPlayback = useClipPlayback(clip);

  const setFocusedObject = useContextSelector(
    FocusedObjectContext,
    ({ setFocusedObject }) => setFocusedObject
  );

  const handleRowMouseDown = useCallback(
    (e: React.MouseEvent) => {
      if (
        (e.target instanceof HTMLElement || e.target instanceof SVGElement) &&
        e.target.matches(
          '.multi-select-button, .multi-select-button *, .clip-interaction-button, .clip-interaction-button *, .context-menu-button, .context-menu-button *'
        )
      ) {
        return;
      }
      setFocusedObject({ type: 'clip', clipId });
    },
    [clipId, setFocusedObject]
  );

  const draggedObject = useClipDraggedObject(clipId);

  return (
    <Draggable draggedObject={draggedObject}>
      <ClipPlaybackProvider value={clipPlayback}>
        <NullableClipContextProvider clip={clip}>
          <RightClickMenuTrigger ContentsComponent={MoreMenuContents}>
            <ClipRowWrapper
              height={ClipRowHeightShort}
              className='clip-pin'
              onMouseDown={handleRowMouseDown}
            >
              <ClipRowGroup>
                <ClipImage small />
                <ClipDetailsWrapper>
                  <ClipTitle />
                  <ClipExactTags />
                </ClipDetailsWrapper>
              </ClipRowGroup>
              <ClipRowGroup className='shrink-0'>
                {clip && (
                  <ContextMenuTrigger
                    ButtonComponent={(props) => (
                      <Button
                        className='hover-fade-in context-menu-button p-3'
                        shape={ButtonShape.Pill}
                        icon={<MoreHorizontalIcon className='h-4 w-4' />}
                        {...props}
                      />
                    )}
                    ContentsComponent={MoreMenuContents}
                  />
                )}
              </ClipRowGroup>
            </ClipRowWrapper>
          </RightClickMenuTrigger>
        </NullableClipContextProvider>
      </ClipPlaybackProvider>
    </Draggable>
  );
});