import { SliderTab } from "../slider";
import Scrollable from "../scrollable_new";
import appSidebarRight, { AppSidebarRight } from "../../lib/appManagers/appSidebarRight";
import appPollsManager from "../../lib/appManagers/appPollsManager";
import { roundPercents } from "../poll";
import { RichTextProcessor } from "../../lib/richtextprocessor";
import appDialogsManager from "../../lib/appManagers/appDialogsManager";
import { ripple } from "../ripple";

export default class AppPollResultsTab implements SliderTab {
  private container = document.getElementById('poll-results-container') as HTMLDivElement;
  private contentDiv = this.container.querySelector('.sidebar-content') as HTMLDivElement;
  private resultsDiv = this.contentDiv.firstElementChild as HTMLDivElement;
  private scrollable: Scrollable;

  private pollID: string;
  private mid: number;

  constructor() {
    this.scrollable = new Scrollable(this.contentDiv, 'POLL-RESULTS', undefined, undefined, 2);
  }

  public cleanup() {
    this.resultsDiv.innerHTML = '';
    this.pollID = '';
    this.mid = 0;
  }

  public onCloseAfterTimeout() {
    this.cleanup();
  }

  public init(pollID: string, mid: number) {
    if(this.pollID == pollID && this.mid == mid) return;
    
    this.cleanup();

    this.pollID = pollID;
    this.mid = mid;

    appSidebarRight.selectTab(AppSidebarRight.SLIDERITEMSIDS.pollResults);

    const poll = appPollsManager.getPoll(pollID);

    const title = document.createElement('h3');
    title.innerHTML = poll.poll.rQuestion;

    const percents = poll.results.results.map(v => v.voters / poll.results.total_voters * 100);
    roundPercents(percents);

    const fragment = document.createDocumentFragment();
    poll.results.results.forEach((result, idx) => {
      if(!result.voters) return;

      const hr = document.createElement('hr');

      const answer = poll.poll.answers[idx];

      // Head
      const answerEl = document.createElement('div');
      answerEl.classList.add('poll-results-answer');

      const answerTitle = document.createElement('div');
      answerTitle.innerHTML = RichTextProcessor.wrapEmojiText(answer.text);

      const answerPercents = document.createElement('div');
      answerPercents.innerText = Math.round(percents[idx]) + '%';

      answerEl.append(answerTitle, answerPercents);

      // Humans
      const list = document.createElement('ul');
      list.classList.add('poll-results-voters');

      appDialogsManager.setListClickListener(list);

      list.style.minHeight = Math.min(result.voters, 4) * 50 + 'px';

      fragment.append(hr, answerEl, list);

      let offset: string, limit = 4, loading = false, left = result.voters - 4;
      const load = () => {
        if(loading) return;
        loading = true;

        appPollsManager.getVotes(mid, answer.option, offset, limit).then(votesList => {
          votesList.votes.forEach(vote => {
            const {dom} = appDialogsManager.addDialog(vote.user_id, list, false, false, undefined, false);
            dom.lastMessageSpan.parentElement.remove();
          });

          if(offset) {
            left -= votesList.votes.length;
            (showMore.lastElementChild as HTMLElement).innerText = `Show ${Math.min(20, left)} more voter${left > 1 ? 's' : ''}`;
          }
          
          offset = votesList.next_offset;
          limit = 20;

          if(!left || !votesList.votes.length) {
            showMore.remove();
          }
        }).finally(() => {
          loading = false;
        });
      };

      load();

      if(left <= 0) return;

      const showMore = document.createElement('div');
      showMore.classList.add('poll-results-more', 'show-more');
      showMore.addEventListener('click', load);

      showMore.innerHTML = `<div class="tgico-down"></div><div>Show ${Math.min(20, left)} more voter${left > 1 ? 's' : ''}</div>`;
      ripple(showMore);

      fragment.append(showMore);
    });

    this.resultsDiv.append(title, fragment);

    appSidebarRight.toggleSidebar(true).then(() => {
      /* appPollsManager.getVotes(mid).then(votes => {
        console.log('gOt VotEs', votes);
      }); */
    });
  }
}