import React, { ForwardRefExoticComponent, LegacyRef, RefAttributes } from "react";
import { FullScreenIcon } from "@icons/FullScreen";

export interface GridItemCompProps{
  name: string;
  value: any;
  onFullScreenTapped: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>, key: string) => void;
  onResizeHandle: () => void;
}
export const GridItemComp: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & GridItemCompProps> =
  React.forwardRef((
    {
      className, style, onMouseDown, onMouseUp, onTouchEnd,
      ...props
    }: any,
    ref: LegacyRef<HTMLDivElement>
  ) => {
    const { name, value, onFullScreenTapped, onResizeHandle } = props;
    return (
      <div
        ref={ref}
        className={`${className} metaViewsContainer`}
        style={{...style}}
        onMouseDown={onMouseDown}
        onMouseUp={onMouseUp}
        onTouchEnd={onTouchEnd}
      >
        <span className={'fullScreen'} onClick={e => onFullScreenTapped(e, name)}><FullScreenIcon color={'#007DEF'}/></span>
        {!React.isValidElement(value) ? value : React.cloneElement(value, { props: value.props, onResizeHandle } as any) }
      </div>
    );
  })