import { ListElement, ListItemElement } from "./component";
import { DataStorage, StorageValue } from "./storage";

export class DataManager<T extends StorageValue> {
  private storage: DataStorage<T>;

  private get dataList(): ListElement<T> {
    return document.querySelector(this.dataListSelector)!;
  }

  constructor(
    listComponentType: typeof ListElement<T>, //prevent removing as unusing
    storageKey: string,
    private dataListSelector: string,
  ) {
    this.storage = new DataStorage(storageKey);
    this.load = this.load.bind(this);
    this.store = this.store.bind(this);
    this.add = this.add.bind(this);
    this.remove = this.remove.bind(this);
  }

  load() {
    this.dataList.value = this.storage.getAll();
  }

  store(element: ListItemElement<T>) {
    if (element.value) {
      this.storage.add(element.value);
    }
  }

  add(element: ListItemElement<T>) {
    const value = element.value;
    value;
    if (value && this.storage.add(value)) {
      const clone: ListItemElement<T> = element.cloneNode(true) as ListItemElement<T>;
      clone.options = { onRemove: this.remove };
      this.dataList.appendChild(clone);
    }
  }

  remove(element: ListItemElement<T>) {
    const value = element.value;
    if (value) {
      this.storage.remove(value.id);
      element.remove();
    }
  }
}