/-  *boke, cnt=contact, tp=trill-post
/+  ui=trill-ui, kaji, const=constants, wall
/=  user  /web/components/user
|_  [tt=tags-table =bowl:gall edit=(unit [thread:tp post:tp])]
++  css  ^~  %-  trip
'''
#error-div{
  color: red;
}
#new-thread{
    padding: 10px;
    margin: auto;
    border: 1px solid var(--background-color);
    border-radius: 1%;
  
  & fieldset{
    border: none;
    padding: 0;
    margin-top: 1rem;

    & label{
      display: block;
    }
    & input{
      width: 100%;
      line-height: 1.5rem;
    }
  }

  & .board-choice{
    display: flex;
    align-items: center;

    & .left{
      width: 20%;
      & select{
        background-color: var(--background-color);
        height: 2rem;
      }
    }
    & .right{
      margin-left: 2rem;
      flex-grow: 1;
    }
  }
  & .author{
    img{
      width:30px;
      height:30px;
    }
    & .name{
      margin-left: 1rem;
    }
  }
  & #bordered{
    border: 1px solid black;
    width: 100%;
    height: 50vh;
    overflow-y: scroll;
    & textarea{
      resize: none;
      width: 100%;
      height: 90%;
      border: none;
      outline: none;
    }
  }
  & #chips{
    position: relative;
    width: 100%;
    border: 1px solid rgb(107, 114, 128);
    padding: 0 0.5rem;

    & .chip{
      display: inline-block;
      font-size: 13px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.6);
      line-height: 26px;
      padding: 0 12px;
      border-radius: 16px;
      background-color: #e4e4e4;
      cursor: pointer;
      margin: 0 2px;
    }
    & .selected-chip{
      background-color: rgb(100, 100, 100);
    }
    & .chip:hover{
      background-color: rgb(100, 100, 100);
    }

    & input{
      border: 0;
      display: inline-block;
      font-size: 16px;
      height: 2rem;
      line-height: 32px;
      outline: 0;
      margin: 0;
      padding: 0 !important;
    }
  }
}
@media (min-width: 800px){
  #new-thread{
      width: 70%;
  }
  
}
@media (max-width: 800px){
  
}
.buttons{
  display: flex;
  gap: 0.5rem;
  justify-content: end;
  align-items: center;
  
}
#poll-button{
  border: none;
  background: url('https://s3.spandrell.ch/assets/board/ui/poll.svg');
  background-size: cover;
  width: 30px;
  height: 30px;
}
'''
++  script
=/  json-tags=json  %-  pairs:enjs:format  
                    %+  turn  ~(tap by tt)  |=  [tag=@t p=(list *)]
                    :+  tag  %n  (scot %ud (lent p))
=/  json-string  %-  trip  %-  en:json:html  json-tags              
^~  %+  weld
"""
const jsonString = '{json-string}';
const allTags = JSON.parse(jsonString);

"""
%-  trip
'''
console.log(allTags, "tags")
const tagInput = document.getElementById("tag-input");
const tagStore = document.getElementById("tag-store");
const chipContainer = document.getElementById("chips");
tagInput.addEventListener("keypress", handleKey);
tagInput.addEventListener("keyup", handleBackspace);

const chipList = new Set(); 

function init(){
  setTimeout(() => {
    console.log(tagStore.value, "tagstore")
    const initTags = tagStore.value.split(",");
    for (let tag of initTags){
      if (tag){
        chipList.add(tag);
        loadChip(tag);
      }
    }
  }, 500)
}
init();

function chipString(){
  const string = [...chipList].reduce((acc, i) => `${acc},${i}`);
  //  const string = JSON.stringify(Array.from(chipList));
  tagStore.value = string;
}
function addChip(itag){
  const tag = itag.toLowerCase();
  if (!chipList.has(tag) && tag.length > 0 && tag.length < 32) {
      chipList.add(tag);
      this.loadChip(tag)
      tagInput.value = "";
      chipString();
  }
}
function removeChip(e){
  chipList.delete(e.target.innerText);
  chipContainer.removeChild(e.target);
  chipString();
}
function loadChip(tag) {
  const c = document.createElement('div');
  c.classList.add("chip");
  c.id = tag;
  c.innerText = tag;
  c.addEventListener("click", removeChip)
  chipContainer.insertBefore(c, tagInput);
}
function handleBackspace(e){
  console.log(e.keyCode, "keyup")
  console.log(e.target.selectionStart, "keyup")
  if (!(e.keyCode === 8 && e.target.selectionStart == 0)) return
  const chips = chipContainer.querySelectorAll('.chip');
  if (chips.length === 0) return
  const to_delete = chipContainer.querySelector('.selected-chip');

  if (to_delete) removeChip({target: to_delete});
  else {
    const last_chip = chips[chips.length - 1];
    last_chip.classList.add("selected-chip");
  }
}
function handleKey(e) {
  // autocomplete?
  console.log(e.keyCode, "keycode")
  console.log(e)
  if (e.keyIdentifier == 'U+000A' || e.keyIdentifier == 'Enter' || e.keyCode == 13) e.preventDefault();
  if (e.keyCode === 13) addChip(e.target.value);
}

  
'''
++  $  ^-  manx
=/  [stitle=tape stags=tape stext=tape]  ?~  edit  ["" "" ""]
:+  (trip title.-.u.edit)
    (tags-to-tape:ui tags.-.u.edit)
    (content-to-md:ui contents.+.u.edit)
=/  wal  ~(. wall src.bowl)
=/  cats   boards:wal 
=/  whoms  (get-contacts:cnt bowl)
=/  usr  (user src.bowl whoms 30)
=/  subscription  (subscription-type:wal now.bowl)
;div#new-thread.fsy
  ;style:"{css}"
  ;+  ?~  edit
    ;h1.tc:"New Thread"
    ;h1.tc:"Edit Thread"
  ;form
    =kaji  "poke"
    =action  "add-thread"
    ;fieldset
    ;label:"Title"
      ;input(type "text", name "title", value stitle);
    ==
    ;fieldset.board-choice
      ;label.left
      ;div:"Board"
      ;select
        =name  "board"
        ;*  %+  turn  %-  sort  :_  aor  ~(tap in cats)  |=  nam=@t
            =/  name  (trip nam)
            ?:  .=(nam 'public')
            ;option(value name, selected ""):"{name}"
            ;option(value name):"{name}"
      ==
      ==
      ;label.right
        ;div:"Tags"
        ;div#chips
          ;input(type "text", placeholder "press enter to input individual tags, click on a tag to delete", enterkeyhint "enter", id "tag-input");
          ;input(type "hidden", id "tag-store", name "tags", value stags);
        ==
      ==
    ==
    ;fieldset
    ;label:"Text"
      ;div#bordered
        ;textarea(name "text")
          ; {stext}
        ==
      ==
    ==
    ;div.f1
        ;div.author.flex
          ;div:"Posting as"
          ;div.flex.ml1
            ;+  avatar.usr
            ;+  name.usr
          ==
        ==
      ;input(type "hidden", name "error-div", value "#error-div");
      ;span#error-div;
      ;div.buttons
        ;*  ?~  subscription  ~  
            ;=  ;button#poll-button(type "button")
                  =kaji  "scry"
                  =swap  "add"
                  =cont  "#bordered"
                  =path  "/board/f/poll/new"
                  ; 
                ==
                ;input#upload-img@"https://s3.spandrell.ch/assets/board/octicons/image-24.svg"(type "image");
            ==
        ;*  ?~  edit  ;+  ;input(type "submit", value "Submit");
            ;=  ;input(type "submit", value "Edit");
                ;input(type "hidden", name "editing")
                  =value  (enc:kaji pid.-.u.edit)
                  ;
                ==
            ==
      ==
    ==
  ==
  ;script:"{script}"
==
--