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

import { AttachmentPlugin, ELEMENT_ATTACHMENT } from '../logic';
import { AttachmentLinkElement } from './attachment-link-element';

export const createAttachmentPlugin = createPluginFactory<AttachmentPlugin>({
  key: ELEMENT_ATTACHMENT,
  isElement: true,
  isVoid: true,
});

export const AttachmentElement = withHOC(
  ResizableProvider,
  withRef<typeof PlateElement>(({ className, children, ...props }, ref) => {
    return (
      <PlateElement ref={ref} className={cn('py-2.5', className)} {...props}>
        <AttachmentLinkElement pluginkey={ELEMENT_ATTACHMENT} />
        {children}
      </PlateElement>
    );
  })
);
