<div class="dropdown is-up is-right {% if IsActive %}is-active{% endif %}"
     id="conversation-dropdown">
  <div class="dropdown-trigger">
    <button class="button is-small to-reduce-opacity"
            aria-haspopup="true"
            aria-controls="dropdown-menu3"
            onclick="this.parentElement.parentElement.classList.toggle('is-active')">
      <span class="icon">
        <i class="fa-solid fa-comments"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu3" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <div id="conversation-list">
          {% for Conversation in Conversations %}
            <div class="icon-text has-text unselected icon-conv {% if Conversation.Selected %}selected{% endif %}"
                 data-id="{{ Conversation.ID.String() }}"
                 style="cursor: pointer"
                 onclick="toggleConversationSelection(this, '{{ Conversation.Name }}')"
                 hx-get="/selectConversation?conversation-id={{ Conversation.ID.String() }}"
                 hx-swap="outerHTML"
                 hx-target="#chat-container"
                 name="{{ Conversation.Name }}">
              <span>{{ Conversation.Name }}</span>
            </div>
          {% endfor %}
        </div>
        <input class="input is-small mt-2 is-hidden"
               type="text"
               id="conversation-name-input"
               name="conversation-name-input"
               placeholder="Conversation name"
               autocomplete="off">
        <div class="is-flex is-justify-content-space-between mt-4 ">
          <button class="button is-small is-danger {% if SelectedIsDefault %}is-hidden{% endif %}"
                  id="delete-conversation-button"
                  hx-get="/deleteConversation"
                  hx-swap="outerHTML"
                  hx-target="#conversation-dropdown"
                  hx-vals="js:{conversationId: findSelectedConversationID()}">
            <span class="icon">
              <i class="fa-solid fa-trash"></i>
            </span>
          </button>
          <button class="button is-small is-primary is-outlined {% if not SelectedIsDefault %}is-hidden{% endif %}"
                  id="archive-default-conversation-button">
            <span class="icon">
              <i class="fa-solid fa-box-archive"></i>
            </span>
          </button>
          <button class="button is-small is-danger is-outlined is-hidden"
                  id="cancel-conversation-button">
            <span class="icon">
              <i class="fa-solid fa-xmark"></i>
            </span>
          </button>
          <div class="is-flex is-justify-content-flex-end">

            <button class="button is-small is-success is-outlined"
                    id="create-conversation-button">
              <span class="icon">
                <i class="fa-solid fa-plus"></i>
              </span>
            </button>
            <button class="button is-small is-success is-outlined is-hidden"
                    id="confirm-conversation-button"
                    hx-get="/createConversation"
                    hx-include="[name='conversation-name-input']"
                    hx-swap="outerHTML"
                    hx-target="#conversation-dropdown">
              <span class="icon">
                <i class="fa-solid fa-check"></i>
              </span>
            </button>
            <button class="button is-small is-success is-outlined is-hidden"
                    id="confirm-archive-default-conversation-button"
                    hx-post="/archiveDefaultConversation"
                    hx-include="[name='conversation-name-input']"
                    hx-swap="outerHTML"
                    hx-target="#conversation-dropdown">
              <span class="icon">
                <i class="fa-solid fa-check"></i>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
        function findSelectedConversationID() {
            return document.getElementsByClassName('icon-conv selected')[0].getAttribute('data-id');
        }

        function toggleConversationSelection(element, name) {
            const elements = Array.from(document.getElementsByClassName('icon-conv'));
            document.getElementById('conversation-dropdown').classList.remove('is-active');

            // If the conversation is already selected, keep it
            if (element.classList.contains('unselected')) {
                for (let i = 0; i < elements.length; i++) {
                    elements[i].classList.remove('selected');
                    elements[i].classList.add('unselected');
                }
                element.classList.remove('unselected');
                element.classList.add('selected');
            } else if (!element.classList.contains('selected')) {
                // Otherwise, select it
                for (let i = 0; i < elements.length; i++) {
                    elements[i].classList.remove('selected');
                    elements[i].classList.add('unselected');
                }
                element.classList.remove('unselected');
                element.classList.add('selected');
            }

            if (name === 'Default') {
                document.getElementById('delete-conversation-button').classList.add('is-hidden');
                document.getElementById('archive-default-conversation-button').classList.remove('is-hidden');
            } else {
                document.getElementById('delete-conversation-button').classList.remove('is-hidden');
                document.getElementById('archive-default-conversation-button').classList.add('is-hidden');
            }
        }

        var sortable = new Sortable(document.getElementById('conversation-list'), {
            animation: 150,
            onEnd: function (evt) {
                var items = evt.to.children;
                var updates = [];
                for (var i = 0; i < items.length; i++) {
                    var id = items[i].getAttribute('data-id');
                    var position = i + 1;
                    updates.push({ id: id, position: position });
                }

                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/updateConversationPositionBatch', true);
                xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
                xhr.send(JSON.stringify(updates));
            }
        });

        document.addEventListener('click', function (event) {
            if (!document.getElementById('conversation-dropdown').contains(event.target)) {
                document.getElementById('conversation-dropdown').classList.remove('is-active');
            }
        });

        document.getElementById('archive-default-conversation-button').addEventListener('click', function () {
            document.getElementById('conversation-name-input').classList.remove('is-hidden');
            document.getElementById('confirm-archive-default-conversation-button').classList.remove('is-hidden');
            document.getElementById('create-conversation-button').classList.add('is-hidden');
            document.getElementById('cancel-conversation-button').classList.remove('is-hidden');
            document.getElementById('delete-conversation-button').classList.add('is-hidden');
            document.getElementById('conversation-list').classList.add('is-hidden');
            document.getElementById('archive-default-conversation-button').classList.add('is-hidden');
        })


        document.getElementById('create-conversation-button').addEventListener('click', function () {
            document.getElementById('conversation-name-input').classList.remove('is-hidden');
            document.getElementById('confirm-conversation-button').classList.remove('is-hidden');
            document.getElementById('create-conversation-button').classList.add('is-hidden');
            document.getElementById('cancel-conversation-button').classList.remove('is-hidden');
            document.getElementById('delete-conversation-button').classList.add('is-hidden');
            document.getElementById('conversation-list').classList.add('is-hidden');
            document.getElementById('archive-default-conversation-button').classList.add('is-hidden');
        })

        document.getElementById('cancel-conversation-button').addEventListener('click', function () {

            document.getElementById('conversation-name-input').classList.add('is-hidden');
            document.getElementById('confirm-conversation-button').classList.add('is-hidden');
            document.getElementById('create-conversation-button').classList.remove('is-hidden');
            document.getElementById('cancel-conversation-button').classList.add('is-hidden');
            document.getElementById('conversation-list').classList.remove('is-hidden');

            // If the selected is the default conversation
            if (document.getElementsByClassName('selected icon-conv')[0].getAttribute('name') === 'Default') {
                document.getElementById('delete-conversation-button').classList.add('is-hidden');
                document.getElementById('archive-default-conversation-button').classList.remove('is-hidden');
                document.getElementById('confirm-archive-default-conversation-button').classList.add('is-hidden');
            } else {
                document.getElementById('delete-conversation-button').classList.remove('is-hidden');
                document.getElementById('archive-default-conversation-button').classList.add('is-hidden');
                document.getElementById('confirm-archive-default-conversation-button').classList.add('is-hidden');
            }
        })
  </script>
</div>
