import React, { useMemo } from 'react';

function LargeScreenComponentText(props: ILargeScreenComponentText) {
  const { value = '', styleText, change, styles, data } = props;

  const drag = (e: React.DragEvent) => {
    e.dataTransfer.dropEffect = 'copy';
    e.dataTransfer.setData('text/plain', JSON.stringify({ ...props }));
  };

  const Dom = useMemo(() => {
    return (
      <div
        className="zl-large-screen-component-text"
        onDoubleClick={() => change?.(data, 'textClick')}
        style={{ ...styles }}
        draggable={true}
        onDragStart={(e) => {
          drag(e);
        }}
      >
        <span style={{ ...styleText }}>{value}</span>
      </div>
    );
  }, [value, styles, styleText]);

  return Dom;
}
export default LargeScreenComponentText;

export interface ILargeScreenComponentText {
  value?: string;
  styleText?: React.CSSProperties;
  change?: Function;
  styles: React.CSSProperties;
  data?: string;
}