import React, { useContext, memo } from 'react';
import Group from './Group';
import DraggableWrap from './DraggableWrap';
import { ComponentDataContext, CallbackContext, PanelDataContext, InteractionContext } from './Context';
import { getGroupDimension, getGroupChildren, getComponentDimension } from 'utils/component';
import { getValueByKey, isGeneralPanel, isComponent } from 'utils/utils';
import { getState, getId } from 'utils/interaction';

function GroupWrap({
  edit,
  id,
  hasFocus,
  focus,
  lock,
  show,
  components,
  movable,
  leftKey,
  topKey,
  topOffset,
  leftOffset,
  transitionTime,
  transitionDelay,
  transitionTimingFunction,
  opacity,
  hideDefault,
  transform,
  mountAnimation,
  parentScreens,
  screenId
}) {
  const { componentsById = {} } = useContext(ComponentDataContext) || {};
  const { callbackValues = {} } = useContext(CallbackContext) || {};
  const { panelsById = {} } = useContext(PanelDataContext) || {};
  const { interactions = [] } = useContext(InteractionContext) || {};

  const { iState, iActiveState } = getState({ id, interactions });
  const allComponentsId = getGroupChildren({ components }).map((d) => d.id);
  const dimensions = allComponentsId
    .map((id) => {
      if (isComponent(id)) {
        const component = componentsById[id];
        if (component) {
          return { id, ...getComponentDimension(component.config) };
        } else {
          return null;
        }
      } else if (isGeneralPanel(id)) {
        const panel = panelsById[getId(id) as number];
        if (panel) {
          const { config } = panel;
          const { width, height, left, top } = config;
          if (panel) {
            return {
              id,
              left,
              top,
              width,
              height
            };
          }
        }
      }
    })
    .filter((d) => d);
  const groupDimension = getGroupDimension(dimensions);
  const { left, top, width, height } = groupDimension;
  let dynamicTop;
  let dynamicLeft;

  if (movable) {
    dynamicTop = getValueByKey(callbackValues, topKey);
    dynamicLeft = getValueByKey(callbackValues, leftKey);
  }

  const locked = hasFocus ? !focus : lock;
  return (
    <DraggableWrap
      hided={!show}
      edit={edit}
      id={id}
      x={left}
      y={top}
      width={width}
      height={height}
      locked={locked}
      hideDefault={hideDefault}>
      <Group
        edit={edit}
        id={id}
        width={width}
        height={height}
        left={left}
        top={top}
        show={show}
        components={components}
        movable={edit ? false : movable} // 编辑不应用movable属性
        dynamicLeft={dynamicLeft}
        dynamicTop={dynamicTop}
        topOffset={topOffset}
        leftOffset={leftOffset}
        transitionTime={transitionTime}
        transitionDelay={transitionDelay}
        transitionTimingFunction={transitionTimingFunction}
        opacity={opacity}
        hideDefault={hideDefault}
        transform={transform}
        mountAnimation={mountAnimation}
        iState={iState}
        iActiveState={iActiveState}
        parentScreens={parentScreens}
        screenId={screenId}
      />
    </DraggableWrap>
  );
}

export default memo(GroupWrap);
