Component({
  properties: {
    pets: { type: Array, value: [] },
    selected: { type: Array, value: [] },
    disabled: { type: Boolean, value: false },
  },
  data: { viewPets: [] },
  observers: {
    "pets,selected": function (pets, selected) {
      this.setData({
        viewPets: (pets || []).map((p) => ({
          ...p,
          chosen: (selected || []).includes(p.id),
        })),
      });
    },
  },
  methods: {
    toggle(e) {
      if (this.data.disabled) return;
      const id = e.currentTarget.dataset.id;
      const selected = this.data.selected.includes(id)
        ? this.data.selected.filter((x) => x !== id)
        : [...this.data.selected, id];
      this.triggerEvent("change", { selected });
    },
    selectAll() {
      if (this.data.disabled) return;
      const ids = this.data.pets.map((pet) => pet.id);
      const allSelected = ids.every((id) => this.data.selected.includes(id));
      this.triggerEvent("change", { selected: allSelected ? [] : ids });
    },
  },
});