import React, { useRef } from 'react';
import { cn, withRef } from '@udecode/cn';
import { PlateElement, withHOC } from '@udecode/plate-common';

import { ELEMENT_ATTACHMENT_VIDEO, useAttachmentState } from '../logic';
import { AttachmentLinkElement } from './attachment-link-element';
import { AttachmentPopover } from './attachment-popover';
import {
  mediaResizeHandleVariants,
  Resizable,
  ResizeHandle,
} from './components/resizable';
import { ResizableProvider } from './components/resizable/src';
import { VideoPlayer } from './components/video-player';

export const AttachmentVideoElement = withHOC(
  ResizableProvider,
  withRef<typeof PlateElement>(
    ({ className, children, nodeProps, ...props }, ref) => {
      const { readOnly, selected, element } = useAttachmentState();

      const { url, align = 'left', width, status, name } = element;

      const elementRef = useRef<HTMLDivElement>(null);

      return (
        <AttachmentPopover
          pluginkey={ELEMENT_ATTACHMENT_VIDEO}
          align={align}
          elementRef={elementRef}
        >
          <PlateElement
            ref={ref}
            className={cn('py-2.5', className)}
            {...props}
          >
            <figure
              className={cn('group relative m-0', status !== 'link' && 'mb-10')}
              contentEditable={false}
            >
              <AttachmentLinkElement
                style={
                  status === 'link'
                    ? { display: 'inline-block' }
                    : { display: 'none' }
                }
                pluginkey={ELEMENT_ATTACHMENT_VIDEO}
              />
              <Resizable
                hidden={status === 'link'}
                align={align}
                options={{
                  align,
                  readOnly,
                  dynamicWidth: width,
                }}
              >
                <ResizeHandle
                  options={{ direction: 'left' }}
                  className={cn(
                    mediaResizeHandleVariants({ direction: 'left' }),
                    readOnly && 'hidden'
                  )}
                />
                <div
                  ref={elementRef}
                  className={cn(
                    'block w-full max-w-full cursor-pointer object-cover px-0',
                    'rounded-sm',
                    selected && 'ring-2 ring-ring ring-offset-1'
                  )}
                  {...nodeProps}
                >
                  <VideoPlayer elementRef={elementRef} url={url} />
                  <span className={cn(`absolute left-1/2 -translate-x-1/2`)}>
                    {name}
                  </span>
                </div>
                <ResizeHandle
                  options={{ direction: 'right' }}
                  className={cn(
                    mediaResizeHandleVariants({ direction: 'right' }),
                    readOnly && 'hidden'
                  )}
                />
              </Resizable>
            </figure>

            {children}
          </PlateElement>
        </AttachmentPopover>
      );
    }
  )
);
