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

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

export const useFloatingMediaStatusButton = () => {
  const { status } = useElement<TImageElement>();
  const editor = useEditorRef();
  const targetStatus = status === 'link' ? 'thumbnail' : 'link';

  return {
    props: {
      onClick: React.useCallback(() => {
        setNodes<TImageElement>(editor, {
          status: targetStatus,
        });
      }, [editor, targetStatus]),
    },
  };
};

export const FloatingMediaStatusButton = createPrimitiveComponent('button')({
  propsHook: useFloatingMediaStatusButton,
});
