import Component from '@glimmer/component';
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

export default class SortableGroupAccessibleComponent extends Component {
  @tracked selectedIndex = 0;
  @tracked groupHasFocus = false;

  @action
  handleFocus() { this.groupHasFocus = true; }

  @action
  handleBlur({ target, relatedTarget }) {
    if (!target.contains(relatedTarget)) this.groupHasFocus = false;
  }

  @action
  handleArrowUp() {
    if (this.selectedIndex > 0) {
      this.selectedIndex -= 1;
    }
  }

  @action
  handleArrowDown() {
    if (this.selectedIndex < this.args.models.length - 1) {
      this.selectedIndex += 1;
    }
  }

  @action
  async orderItemUp(index) {
    if (index - 1 < 0) return;

    let item = this.args.models.objectAt(index);
    let prevItem = this.args.models.objectAt(index - 1);

    item.listOrder = index - 1;
    prevItem.listOrder = index;
    this.selectedIndex = index - 1;
  }

  @action
  async orderItemDown(index) {
    if (index + 1 >= this.args.models.length) return;

    let item = this.args.models.objectAt(index);
    let nextItem = this.args.models.objectAt(index + 1);

    item.listOrder = index + 1;
    nextItem.listOrder = index;
    this.selectedIndex = index + 1;
  }

  preventDefault(evt) { evt.preventDefault(); }
}