import { html, ref } from "/js/lib/lit-html.js";
import { classnames, enableLongPress } from "/js/utils.js";
import { homeIconTemplate } from "/js/templates/icons/homeIcon.template.js";
import { userIconTemplate } from "/js/templates/icons/userIcon.template.js";
import { searchIconTemplate } from "/js/templates/icons/searchIcon.template.js";
import { chatIconTemplate } from "/js/templates/icons/chatIcon.template.js";
import { settingsIconTemplate } from "/js/templates/icons/settingsIcon.template.js";
import { avatarTemplate } from "/js/templates/avatar.template.js";
import { notificationsIconTemplate } from "/js/templates/icons/notificationsIcon.template.js";
import { formatNumNotifications } from "/js/utils.js";
import { linkToLogin } from "/js/navigation.js";

function footerNavItemTemplate({ item, active }) {
  return html`${item.icon({ filled: active })}
  ${item.badge
    ? html`<div class="status-badge" data-testid="status-badge">
        <div class="status-badge-text">${item.badge}</div>
      </div>`
    : null} `;
}

function loggedOutFooterTemplate() {
  return html`
    <footer
      class="footer-nav logged-out-footer"
      data-testid="logged-out-footer"
    >
      <a href="/"><h2 data-testid="brand-title">IMPRO</h2></a>
      <a
        href=${linkToLogin()}
        class="rounded-button rounded-button-primary login-button"
        data-testid="login-button"
        >Sign in</a
      >
    </footer>
  `;
}

export function footerTemplate({
  isAuthenticated,
  currentUser,
  activeNavItem = null,
  numNotifications = 0,
  numChatNotifications = 0,
  onClickActiveItem,
  onLongPressProfile = null,
}) {
  if (!isAuthenticated) {
    return loggedOutFooterTemplate();
  }
  const menuItems = [
    {
      id: "home",
      icon: homeIconTemplate,
      url: "/",
    },
    {
      id: "search",
      icon: searchIconTemplate,
      url: "/search",
    },
    {
      id: "chat",
      icon: chatIconTemplate,
      url: "/messages",
      badge:
        numChatNotifications > 0
          ? formatNumNotifications(numChatNotifications)
          : null,
    },
    {
      id: "notifications",
      icon: notificationsIconTemplate,
      url: "/notifications",
      badge:
        numNotifications > 0 ? formatNumNotifications(numNotifications) : null,
    },
    {
      id: "profile",
      // icon: userIconTemplate,
      url: currentUser ? `/profile/${currentUser.handle}` : "",
      disabled: !currentUser,
      template: () =>
        html`${currentUser
          ? avatarTemplate({ author: currentUser, clickAction: "none" })
          : html`<div class="avatar-image-placeholder"></div>`}`,
    },
  ];

  return html`
    <footer class="footer-nav" data-testid="footer-nav">
      <nav>
        ${menuItems.map((item) => {
          const active = activeNavItem === item.id;
          const longPressEnabled =
            item.id === "profile" && onLongPressProfile !== null;
          return html`<a
            ${ref((el) => {
              if (el && longPressEnabled) {
                enableLongPress(el);
              }
            })}
            class=${classnames("footer-nav-item", {
              active,
              "long-press-enabled": longPressEnabled,
            })}
            href=${item.url}
            data-testid="footer-nav-${item.id}"
            ?disabled=${item.disabled}
            @long-press=${longPressEnabled ? () => onLongPressProfile() : null}
            @click=${(e) => {
              // tap active item to scroll to top
              if (active) {
                e.preventDefault();
                e.stopPropagation();
                onClickActiveItem?.(item.id);
              }
            }}
            >${item.template
              ? item.template({ item, active })
              : footerNavItemTemplate({ item, active })}
          </a>`;
        })}
      </nav>
    </footer>
  `;
}
