import React, { memo, useContext, useEffect } from 'react';
import { ScreenContext, ScreenDataContext } from './Context';
import Screen from './Screen';
import ReferencePanelVerification from '@/containers/screen-detail/components/ReferencePanelVerification';
import { useSelector } from 'react-redux';
import { RootState } from '@/models';

interface ScreenWrapProps {
  id: number;
  width?: number;
  height?: number;
  userSetPassword?: string
}

const ScreenWrap = memo(({ id, width, height, userSetPassword }: ScreenWrapProps) => {
  const { screensById = {} } = useContext(ScreenDataContext);
  const { getScreenData } = useContext(ScreenContext);
  const screen = screensById[id];
  const screensStatus = useSelector<RootState>((state) => state.screensStatus) || {};

  useEffect(() => {
    if (!screen && screensStatus[id] !== -1) {
      getScreenData && getScreenData(id);
    }
  }, [id]);

  if (screen) {
    const { layers, config, panelId, mobileId, globalFilter } = screen;
    return <Screen
      id={id}
      type={mobileId ? 'mobile' : panelId ? 'state' : 'screen'}
      width={width}
      height={height}
      layers={layers}
      config={config}
      globalFilter={globalFilter}
    />
  } else {
    return <ReferencePanelVerification
      userSetPassword={userSetPassword}
      screenId={id}
      width={width}
      height={height}
    />;
  }
});
export default ScreenWrap;
