import axios from 'B/axios';

declare global {
  interface Window {
    tagsRequestController?: any;
    isRequestingNewTag?: boolean;
  }
}

interface Tag {
  id: number;
  tag: string;
  groupID: number;
}

class RepositoryTag {
  public async getTagsForGroup(groupID: string): Promise<Tag[]> {
    // abort existing request
    // if (window?.tagsRequestController != null) {
    // window.tagsRequestController.abort();
    // }

    // window.tagsRequestController = new AbortController();

    const requestTags = await axios.get(`/tags/${groupID}`, {
      // signal: window.tagsRequestController
    });

    alert('tags');

    return [];
  }

  public async createTagForGroup(
    groupID: string,
    newTag: string
  ): Promise<boolean> {
    return await axios.post(`/tags/${groupID}`, {
      tag: newTag,
    });
  }

  public async removeTagForGroup(tagID, groupID) {
    return await axios.delete(`/tags/${groupID}/${tagID}`);
  }
}

function refreshAutoComplete(optionList: HTMLOptionElement[]) {
  var tagList = document.getElementById('tag_list');
  if (tagList == null) return;

  tagList.replaceChildren(...optionList);
}

async function handleCreateTag(e: KeyboardEvent) {
  // e.preventDefault();
  if (e.key !== 'Enter') return;
  alert('enter');
  if (window.isRequestingNewTag) {
    alert('request going out');
    return;
  }
  window.isRequestingNewTag = true;

  const inputelement = e.target as HTMLInputElement;

  const newtag = inputelement.value.trim();
  if (newtag.length == 0) return;

  const groupID = inputelement.dataset.groupid;
  if (groupID == null) return;

  // submit new tag request here
  const repo = new RepositoryTag();
  await repo.createTagForGroup(groupID, newtag);
  const tags = await repo.getTagsForGroup(groupID);
  refreshAutoComplete(tags.map((t) => new Option(t.tag, t.tag)));
  window.isRequestingNewTag = false;
}

(() => {
  const tagInput = document.getElementById('tag') as HTMLInputElement | null;
  if (!tagInput) return;

  // add tag
  tagInput.addEventListener('keypress', handleCreateTag);

  // remove tag
  const tagsToListenRemoveEvents = document.getElementsByClassName(
    'tag-hover-delete-effect'
  ) as HTMLCollectionOf<HTMLElement>;
  Array.from(tagsToListenRemoveEvents).forEach((e) => {
    e.addEventListener('click', async (e) => {
      const tagElement = e.target as HTMLElement;

      const groupID = tagElement.dataset.groupid;
      if (groupID == null) return;

      var tagID = (e.target as HTMLElement).dataset?.tagid;
      if (tagID == null) return;

      alert('send tag remove request from here');
      const repo = new RepositoryTag();

      await repo.removeTagForGroup(tagID, groupID);
      const tags = await repo.getTagsForGroup(groupID);
      if (tags.length == 0) return;

      refreshAutoComplete(
        tags.map((t) => {
          let option = new Option(t.tag, t.tag);
          option.dataset.groupid = t.groupID.toString();
          return option;
        })
      );
    });
  });
})();