import React, { memo, useContext } from 'react';
import Screen from './Screen';
import { ScreenDataContext } from './Context';
import { Utils } from '@easyv/react-gui';

const { reduceConfig } = Utils;

/**
 *
 *
 * @param {*} active 为当前屏是否显示，一般只针对动态面板的状态屏
 * width,height 对于动态面板的状态屏，自身配置里没有width height,跟动态面板保持同宽高
 * allowScroll 对于编辑状态来说是unset，状态屏来源于动态面板配置，其他从配置中获得
 * @returns
 */

function ScreenWrap({
  id,
  edit = false,
  active = true,
  width,
  height,
  allowScroll,
  parentScreens = []
}: {
  id: number;
  edit?: boolean;
  active?: boolean;
  width?: number;
  height?: number;
  allowScroll?: boolean;
  parentScreens?: any[];
}) {
  const { screensById = {} } = useContext(ScreenDataContext);
  const screen = screensById[id];

  if (screen) {
    const { layers, config, panelId, mobileId, globalFilter } = screen;
    let { backgroundColor, useBackground = true, background } = reduceConfig(config);
    const { initLoad, dimension, style, component } = reduceConfig(config);
    if (!panelId) {
      width = +dimension.width;
      height = +dimension.height;
      background = style.background;
      backgroundColor = style.backgroundColor;
      useBackground = style.useBackground;
      allowScroll = mobileId ? true : component.scroll;
    }

    return (
      <Screen
        edit={edit}
        id={id}
        width={width}
        height={height}
        layers={layers}
        active={active}
        allowScroll={allowScroll}
        backgroundColor={backgroundColor}
        backgroundImage={background}
        useBackgroundImage={useBackground}
        initLoad={initLoad}
        globalFilter={globalFilter || {}}
        parentScreens={parentScreens}
      />
    );
  } else {
    return null;
  }
}

export default memo(ScreenWrap);
