import { _decorator, Component, Node, tween, Vec3 } from "cc";
import { SimpleToggle } from "./SimpleToggle";
const { ccclass, property } = _decorator;

@ccclass("SimpleToggleGroup")
export class SimpleToggleGroup extends Component {
  toggles: SimpleToggle[];

  @property(Node)
  slider: Node;

  protected onLoad(): void {
    this.toggles = this.getComponentsInChildren(SimpleToggle);

    for (let i = 0; i < this.toggles.length; i++) {
      const element = this.toggles[i];
      element.toggleGroupCallBack = this.toggleSelected.bind(this);
    }
  }

  toggleSelected(selectedNode: Node) {
    const pos = this.slider.getPosition();
    const targetPos = new Vec3(selectedNode.getPosition().x, pos.y, pos.z);
    tween(this.slider)
      .to(0.3, { position: targetPos }, { easing: "sineInOut" })
      .start();

    for (let i = 0; i < this.toggles.length; i++) {
      const element = this.toggles[i];
      if (element.node === selectedNode) {
        element.refresh(true);
      } else {
        element.refresh(false);
        element.btn.interactable = true;
      }
    }
  }
}