import React, { ReactNode, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import { SidePanelsState } from '../../state/SidePanelsState';

export interface SidePanelModalItemProps {
  id: string;
  children?: ReactNode;
  width: number | string;
  state: SidePanelsState;
}

function _SidePanelModalItem(props: SidePanelModalItemProps) {
  const { state, id, children, width } = props;

  const { sidePanel } = state;

  const style = useMemo(() => {
    const visible = sidePanel.currentPanelId === id;
    const left = visible ? 0 : width;

    return {
      position: 'absolute' as const,
      width: '100%',
      bottom: 0,
      top: 0,
      transform: `translate(${left}px, 0px)`,
      visibility: visible ? undefined : ('hidden' as const),
    };
  }, [sidePanel.currentPanelId, id, width]);

  return <div style={style}>{children}</div>;
}

export const SidePanelModalItem = observer(_SidePanelModalItem);