import {
  Stage as PixiStage,
} from '@pixi/react';
import {SCALE_MODES} from '@pixi/constants';
import {BaseTexture} from '@pixi/core';

import {RESOLUTION} from '@/constants.js';
import ClientContext from '@/context/client.js';

import Ecs from './ecs.jsx';
import styles from './pixi.module.css';

BaseTexture.defaultOptions.scaleMode = SCALE_MODES.NEAREST;

const ContextBridge = ({ children, Context, render }) => {
  return (
    <Context.Consumer>
      {(value) =>
        render(<Context.Provider value={value}>{children}</Context.Provider>)
      }
    </Context.Consumer>
  );
};

export const Stage = ({children, ...props}) => {
  return (
    <ContextBridge
      Context={ClientContext}
      render={(children) => <PixiStage {...props}>{children}</PixiStage>}
    >
      {children}
    </ContextBridge>
  );
};

export default function Pixi() {
  return (
    <Stage
      className={styles.stage}
      width={RESOLUTION.x}
      height={RESOLUTION.y}
      options={{
        background: 0x1099bb,
      }}
    >
      <Ecs />
    </Stage>
  );
}