import React from 'react';
import {
  createPrimitiveComponent,
  setNodes,
  useEditorRef,
  useElement,
} from '@udecode/plate-common';

import { TImageElement } from '../../image';

export const useFloatingAttachmentBorderButton = () => {
  const element = useElement<TImageElement>();
  const editor = useEditorRef();

  return {
    props: {
      onClick: React.useCallback(() => {
        const curBordered = !element.bordered;
        setNodes<TImageElement>(editor, {
          bordered: curBordered,
        });
      }, [editor, element.bordered]),
    },
  };
};

export const FloatingMediaBorderButton = createPrimitiveComponent('button')({
  propsHook: useFloatingAttachmentBorderButton,
});
