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

import { ELEMENT_ATTACHMENT_AUDIO, 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';

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

      const { url, name, status, width } = element;

      const elementRef = useRef<HTMLDivElement>(null);

      return (
        <AttachmentPopover
          align={align}
          pluginkey={ELEMENT_ATTACHMENT_AUDIO}
          elementRef={elementRef}
        >
          <PlateElement
            ref={ref}
            className={cn('py-2.5', className)}
            {...props}
          >
            <AttachmentLinkElement
              style={
                status === 'link'
                  ? { display: 'inline-block' }
                  : { display: 'none' }
              }
              pluginkey={ELEMENT_ATTACHMENT_AUDIO}
            />
            <figure
              hidden={status === 'link'}
              className={cn('group relative m-0', status !== 'link' && 'mb-5')}
              contentEditable={false}
            >
              <Resizable
                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',
                    'relative rounded-sm',
                    focused && selected && 'ring-2 ring-ring ring-offset-1'
                  )}
                  {...nodeProps}
                >
                  <AudioPlayer url={url} name={name} />

                  <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>
      );
    }
  )
);
