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

import {
  AttachmentImage,
  ELEMENT_ATTACHMENT_DOCUMENT,
  useAttachmentState,
} from '../logic';
import { AttachmentIcon } from './attachment-icon';
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 AttachmentDocumentElement = withHOC(
  ResizableProvider,
  withRef<typeof PlateElement>(
    ({ className, children, nodeProps, ...props }, ref) => {
      const {
        readOnly,
        focused,
        selected,
        align = 'left',
        element,
      } = useAttachmentState();

      const elementRef = useRef<HTMLDivElement>(null);

      const { width, bordered, name, status, fileType } = element;

      return (
        <AttachmentPopover
          align={align}
          pluginkey={ELEMENT_ATTACHMENT_DOCUMENT}
          elementRef={elementRef}
        >
          <PlateElement
            ref={ref}
            className={cn('py-2.5', className)}
            {...props}
          >
            <AttachmentLinkElement
              style={
                status === 'link'
                  ? { display: 'inline-block' }
                  : { display: 'none' }
              }
              pluginkey={ELEMENT_ATTACHMENT_DOCUMENT}
            />
            <figure
              hidden={status === 'link'}
              className="group relative m-0"
              contentEditable={false}
            >
              <Resizable
                align={align}
                options={{
                  align,
                  readOnly,
                  dynamicWidth: width,
                }}
              >
                <ResizeHandle
                  options={{ direction: 'left' }}
                  className={cn(
                    mediaResizeHandleVariants({ direction: 'left' }),
                    readOnly && 'hidden'
                  )}
                />
                <div
                  className={cn(
                    'block w-full max-w-full cursor-pointer object-cover px-0',
                    'rounded-sm',
                    //TODO: bordered style
                    ((focused && selected) || bordered) &&
                      'ring-2 ring-ring ring-offset-1'
                  )}
                >
                  <AttachmentImage
                    ref={elementRef}
                    className="h-full w-full"
                    alt=""
                    {...nodeProps}
                  />
                  <div className="flex flex-row items-center gap-1 bg-[#F2F5FC] p-2">
                    <AttachmentIcon type={fileType} />
                    <div className="flex-1 truncate">{name}</div>
                  </div>
                </div>
                <ResizeHandle
                  options={{ direction: 'right' }}
                  className={cn(
                    mediaResizeHandleVariants({ direction: 'right' }),
                    readOnly && 'hidden'
                  )}
                />
              </Resizable>
            </figure>

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