import React, { useContext } from 'react';
import DraggableWrap from './DraggableWrap';
import { ScreenContext, PanelDataContext, InteractionContext } from './Context';
import Panel from './Panel';
import { getState, getId } from 'utils/interaction';

function PanelWrap({ id, edit, lock, hideDefault, show, parentScreens, screenId }) {
  const panelId = getId(id) as number;
  const { switchPanelState } = useContext(ScreenContext) || {};
  const { panelsById = {} } = useContext(PanelDataContext) || {};
  const { interactions = [] } = useContext(InteractionContext) || {};

  const panel = panelsById[panelId];

  if (panel) {
    const { config = {}, states = [] } = panel;
    const { iState, iActiveState } = getState({ id, interactions });
    const { left, top, width, height } = config;

    return (
      <DraggableWrap
        hided={!show}
        edit={edit}
        id={id}
        x={left}
        y={top}
        width={width}
        height={height}
        locked={lock}
        hideDefault={hideDefault}>
        {show ? (
          <Panel
            id={id}
            states={states}
            config={config}
            iState={iState}
            iActiveState={iActiveState}
            switchPanelState={switchPanelState}
            parentScreens={parentScreens}
            screenId={screenId}
          />
        ) : null}
      </DraggableWrap>
    );
  } else {
    return null;
  }
}

export default PanelWrap;
