import { PointNodeComponent } from "./PointNodeComponent";

import { PointNodeComponent, PointNodeComponentProps } from "./PointNodeComponent";

import { RootComponentState } from "./RootComponent";

  tooltipUpdaters: UpdaterGeneratorType2<RootComponentState>['tooltip'],

      let childPropsFactory = (props: Props, state: State) => {

      let childPropsFactory = (props: Props, state: State) : PointNodeComponentProps => {

          tooltipUpdaters: props.tooltipUpdaters,

import { RootComponentState } from "./RootComponent";

  tooltipUpdaters: UpdaterGeneratorType2<RootComponentState>['tooltip'],

  numClicks:number // debug

  numClicks: number // debug
  descriptionText: string;

      numClicks: 0

      numClicks: 0,
      descriptionText: '',

    this.updateSelf(props); // initialize the description text properly

    // this.container.hitArea = this.hitArea;

    this.container.hitArea = this.hitArea;

    const tooltippableAreaPropsFactory = (p: Props, s: State) => {
      let nodeDescription: string = "Nothing (empty node)";
      if (p.pointNodeGen.resourceType !== ResourceType.Nothing) {
        nodeDescription = `${p.pointNodeGen.resourceAmount} ${p.pointNodeGen.resourceModifier} ${p.pointNodeGen.resourceType}`;
      }
      return {
        args: {
          markForceUpdate: this.markForceUpdate,
        },
        text: nodeDescription,
        hitArea: this.hitArea, // TODO(bowei): move into state???
      }
    }
    this.tooltippableArea = new TooltippableAreaComponent(tooltippableAreaPropsFactory(props, this.state));

    // const tooltippableAreaPropsFactory = (p: Props, s: State) => {
    //   let nodeDescription: string = "Nothing (empty node)";
    //   if (p.pointNodeGen.resourceType !== ResourceType.Nothing) {
    //     nodeDescription = `${p.pointNodeGen.resourceAmount} ${p.pointNodeGen.resourceModifier} ${p.pointNodeGen.resourceType}`;
    //   }
    //   return {
    //     args: {
    //       markForceUpdate: this.markForceUpdate,
    //     },
    //     text: nodeDescription,
    //     hitArea: this.hitArea, // TODO(bowei): move into state???
    //   }
    // }
    // this.tooltippableArea = new TooltippableAreaComponent(tooltippableAreaPropsFactory(props, this.state));

    this.addChild({
      childClass: TooltippableAreaComponent,
      instance: this.tooltippableArea,
      propsFactory: tooltippableAreaPropsFactory,
    });

    // this.addChild({
    //   childClass: TooltippableAreaComponent,
    //   instance: this.tooltippableArea,
    //   propsFactory: tooltippableAreaPropsFactory,
    // });
  }
  protected updateSelf(props: Props) {
    let nodeDescription: string = "Nothing (empty node)";
    if (props.pointNodeGen.resourceType !== ResourceType.Nothing) {
      nodeDescription = `${props.pointNodeGen.resourceAmount} ${props.pointNodeGen.resourceModifier} ${props.pointNodeGen.resourceType}`;
    }
    this.state.descriptionText = nodeDescription;

    this.container.addListener('pointerover', (event: Pixi.InteractionEvent) => {
      this._staleProps.args.markForceUpdate(this);
      this._staleProps.tooltipUpdaters.enqueueUpdate((prev) => {
        const next = { ...prev, visible: true, text: this.state.descriptionText };
        next.position = new Vector2(this.container.worldTransform.tx, this.container.worldTransform.ty);
        // TODO(bowei): what about position??
        // console.log({ next });
        return next;
      })
    });
    this.container.addListener('pointerout', (event: Pixi.InteractionEvent) => {
      this._staleProps.args.markForceUpdate(this);
      this._staleProps.tooltipUpdaters.enqueueUpdate((prev) => {
        const next = { ...prev, visible: false, text: '' };
        return next;
      })
    });

  public fixedCameraStage: FixedCameraStageComponent;

  private fixedCameraStage: FixedCameraStageComponent;

  public actionStage: Pixi.Container;

  private actionStage: Pixi.Container;

  public backdropStage: Pixi.Container;

  private backdropStage: Pixi.Container;

  public zLevel: ZLevelComponent | undefined;
  public zLevelPropsFactory: (p: Props, s: State) => ZLevelComponentProps;
  public backdrop: Pixi.Graphics;

  private zLevel: ZLevelComponent | undefined;
  private zLevelPropsFactory: (p: Props, s: State) => ZLevelComponentProps;
  private backdrop: Pixi.Graphics;

        tooltipUpdaters: this.stateUpdaters.tooltip,

      console.log({ currentZ: this.state.playerCurrentZ });

      // console.log({ currentZ: this.state.playerCurrentZ });

      console.log({ currentZ: this.state.playerCurrentZ });

      // console.log({ currentZ: this.state.playerCurrentZ });

export { wrapped as RootComponent };

export { wrapped as RootComponent };
export type { Props as RootComponentProps, State as RootComponentState };

  private box?: Pixi.Graphics;

    this.container.sortableChildren = true;

    const box = new Pixi.Graphics();

    // this.box = new Pixi.Graphics();
    // this.box.lineStyle(1, 0x222222, 1);
    // this.box.beginFill(0xEEEEEE);
    // this.box.drawRoundedRect(0, 0, this.text.width + 18, this.text.height + 18, 4);
    // this.box.zIndex = 0;
    // this.container.addChild(this.box);
  }

    box.lineStyle(1, 0x222222, 1);
    box.beginFill(0xEEEEEE);
    box.drawRoundedRect(0, 0, this.text.width + 18, this.text.height + 18, 4);
    box.zIndex = 0;
    this.container.addChild(box);

  protected shouldUpdate(prevProps: Props, prevState: State, props: Props, state: State): boolean {
    for (let key of (Object.keys(prevProps) as (keyof Props)[])) {
      if (prevProps[key] !== props[key]) {
        return true;
      }
    }
    return false;

    this.text.text = props.text;
    if (this.box) {
      this.container.removeChild(this.box);
    }
    this.box = new Pixi.Graphics();
    this.box.lineStyle(1, 0x222222, 1);
    this.box.beginFill(0xEEEEEE);
    this.box.drawRoundedRect(0, 0, this.text.width + 18, this.text.height + 18, 4);
    this.box.zIndex = 0;
    this.container.addChild(this.box);

import { RootComponentState } from "./RootComponent";

  tooltipUpdaters: UpdaterGeneratorType2<RootComponentState>['tooltip'],

        tooltipUpdaters: props.tooltipUpdaters,