import Component from "@glimmer/component";
import { dasherize } from "@ember/string";
import concatClass from "discourse/helpers/concat-class";

function normalizeLocale(locale) {
  return locale?.trim().toLowerCase().replace(/[-_]/g, "_");
}

export default class CustomHeaderLinks extends Component {
  get shouldShow() {
    return settings.custom_header_links?.length > 0;
  }

  get links() {
    return settings.custom_header_links.reduce((result, link) => {
      const linkText = link.text;
      const linkTitle = link.title;
      const linkHref = link.url;
      const target = link.target;
      const hideOnScroll = link.hide_on_scroll;
      const locale = link.locale;
      const device = link.view;

      const currentLocale = normalizeLocale(document.documentElement.lang);

      if (!linkText || (locale && normalizeLocale(locale) !== currentLocale)) {
        return result;
      }

      const linkClass = `${dasherize(linkText)}-custom-header-links`; // legacy name

      const anchorAttributes = {
        title: linkTitle,
        href: linkHref,
        target: target === "self" ? "" : "_blank",
      };

      result.push({
        device: `headerLink--${device}`,
        hideOnScroll: `headerLink--${hideOnScroll}`,
        locale: locale ? `headerLink--${locale}` : null,
        linkClass,
        anchorAttributes,
        linkText,
      });

      return result;
    }, []);
  }

  <template>
    {{#if this.shouldShow}}
      <ul
        class="custom-header-links
          {{if @outletArgs.topicInfoVisible 'custom-header-links--hide-links'}}"
      >
        {{#each this.links as |link|}}
          <li
            class={{concatClass
              "headerLink"
              link.device
              link.locale
              link.linkClass
              link.hideOnScroll
            }}
          >
            <a
              title={{link.anchorAttributes.title}}
              href={{link.anchorAttributes.href}}
              target={{link.anchorAttributes.target}}
            >
              {{link.linkText}}
            </a>
          </li>
        {{/each}}
      </ul>
    {{/if}}
  </template>
}