import React, { memo } from 'react';
import { Utils } from '@easyv/react-gui';
import { joinFilter } from 'utils/screen';
import Components from './Components';
import { getAssetsUrl } from 'utils/utils';

const { reduceConfig } = Utils;

interface GlobalFilter {
  open: boolean;
  hue: number;
  brightness: number;
  contrast: number;
  grayscale: number;
  opacity: number;
  saturate: number;
}

interface ScreenProps {
  id: number;
  type: 'screen' | 'state' | 'mobile';
  layers: any[];
  width?: number;
  height?: number;
  config: any;
  globalFilter?: GlobalFilter;
}

function Screen({
  id,
  type = 'screen',
  width,
  height,
  config,
  globalFilter,
  layers = [],
}: ScreenProps) {
  let { backgroundColor, useBackground = true, background } = reduceConfig(config);
  const { style, dimension } = reduceConfig(config);

  if (type !== 'state') {
    // 动态面板的状态屏自身没有宽高配置，需要从外层的动态面板获取传递下来
    width = +dimension.width;
    height = +dimension.height;
    // 由于之前设计的原因，动态面板的状态屏背景相关的配置放在最外层，其他的放在style里面，没有保持一致，需要特殊处理
    background = style.background;
    backgroundColor = style.backgroundColor;
    useBackground = style.useBackground;
  }
  const bg = getAssetsUrl(background);

  const screenStyle: React.CSSProperties = {
    // position: /\/panel\//i.test(window.location.pathname) ? 'relative' : 'absolute',
    position: 'absolute',
    width,
    height,
    backgroundColor,
    backgroundImage: useBackground && background ? `url(${bg})` : undefined,
    backgroundSize: 'cover',
    backgroundPosition: 'center center',
    pointerEvents: 'none', // 大屏的内部空白处为了不影响下面的图层被点击，需要强制设置为 none，在组件上设置 auto
    overflow: type === 'state' ? undefined : 'hidden', // 状态屏由外层动态面板控制是否需要滚动
    filter: joinFilter(globalFilter),
  };

  return (
    <div id={`screen_${id}`} style={screenStyle}>
      <Components layers={layers} />
    </div>
  );
}

export default memo(Screen);
