import React, { memo, useContext, FC } from 'react';
import { DragContext, LayersSelectedContext, ModalEditContext } from './EditContext';
import Draggable from './Draggable';
import { ScreenContext } from './Context';
import { isMobileScreen, isScreen } from 'utils/screen';

const DraggableWrap: FC<{
  edit: boolean;
  hided: boolean;
  id: number | string;
  x: number;
  y: number;
  width: number;
  height: number;
  locked: boolean;
  hideDefault: boolean;
  useInteraction?: boolean;
  children: React.ReactNode;
}> = ({ edit, hided, id, children, x, y, width, height, locked, hideDefault, useInteraction }) => {
  const { scale, changeComponentConfigActiveKey } = useContext(DragContext) || {};
  const { layersSelected = [] } = useContext(LayersSelectedContext) || {};
  const { modalEdit } = useContext(ModalEditContext);
  const { isDefaultHide } = useContext(ScreenContext);

  const selected = layersSelected.includes(id);
  if (edit) {
    return (
      <Draggable
        id={id}
        modalEditId={modalEdit}
        scale={scale}
        x={x}
        y={y}
        width={width}
        height={height}
        selected={selected}
        locked={locked}
        hided={hided}
        hideDefault={hideDefault}
        useInteraction={useInteraction}
        isDefaultHide={isDefaultHide}
        changeComponentConfigActiveKey={changeComponentConfigActiveKey}>
        {children}
      </Draggable>
    );
  } else {
    // 编辑页的动态面板的默认隐藏
    if (hideDefault && (isScreen() || isMobileScreen())) {
      return null;
    }

    return children as React.ReactElement;
  }
};

export default memo(DraggableWrap);
