import Component from "@glimmer/component";
import { service } from "@ember/service";
import { htmlSafe } from "@ember/template";
import { on } from "@ember/modifier";
import { concat } from "@ember/helper";
import { eq, and, not } from "truth-helpers";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
import SearchMenu from "discourse/components/search-menu";
import icon from "discourse-common/helpers/d-icon";

export default class WelcomeBanner extends Component {
  @service router;
  @service site;
  @service currentUser;

  get displayForRoute() {
    const showOnPages = settings.show_on_pages || "homepage_only";
    const currentRoute = this.router.currentRouteName;

    if (showOnPages === "all_pages") {
      return true;
    }

    // Show only on homepage
    return currentRoute === "discovery.latest" || currentRoute === "discovery.categories";
  }

  get shouldDisplay() {
    return settings.enable_welcome_banner && this.displayForRoute;
  }

  get isAnonymous() {
    return !this.currentUser;
  }

  get heroTitle() {
    return this.isAnonymous
      ? settings.hero_title_anonymous_html
      : settings.hero_title_html;
  }

  get heroContent() {
    return this.isAnonymous
      ? settings.hero_content_anonymous_html
      : settings.hero_content_html;
  }

  didInsert() {
    document.documentElement.classList.add("display-welcome-banner");
  }

  willDestroy() {
    document.documentElement.classList.remove("display-welcome-banner");
  }

  openSearchMenu(event) {
    event.preventDefault();
    // Search menu will be handled by Discourse's native component
  }

  goToLogin = () => {
    this.router.transitionTo("login");
  };

  goToSignup = () => {
    this.router.transitionTo("signup");
  };

  <template>
    {{#if this.shouldDisplay}}
      {{#if settings.custom_css}}
        <style>{{settings.custom_css}}</style>
      {{/if}}
      <section class={{concat settings.banner_position "-outlet"}} {{didInsert this.didInsert}} {{willDestroy this.willDestroy}}>
        <div class="welcome-card">
          <div class="hero-section">
            <div class="hero-deco"></div>
            <div class="hero-content">
              <h2 class="hero-title">
                {{htmlSafe this.heroTitle}}
              </h2>
              <div class="hero-description">
                {{htmlSafe this.heroContent}}
              </div>
              {{#if this.isAnonymous}}
                <div class="hero-buttons">
                  <button
                    type="button"
                    class="btn btn-primary hero-login-btn"
                    {{on "click" this.goToLogin}}
                  >
                    {{settings.login_button_text}}
                  </button>
                  <button
                    type="button"
                    class="btn btn-default hero-register-btn"
                    {{on "click" this.goToSignup}}
                  >
                    {{settings.register_button_text}}
                  </button>
                </div>
              {{else}}
                {{#if settings.enable_hero_search}}
                  <div class="search-container" role="search">
                    <SearchMenu @searchInputId="welcome-banner-search" />
                  </div>
                {{/if}}
              {{/if}}
            </div>
          </div>

          <div class="cta-section">
            <ul class="cta-list">
              {{#if settings.cta_card_1_enabled}}
                <li>
                  <a href={{settings.cta_card_1_url}} class="cta-card" aria-label={{settings.cta_card_1_title}}>
                    <div class="cta-top">
                      <div class="cta-icon">
                        {{#if (eq settings.cta_card_1_icon_type "font_awesome")}}
                          {{icon settings.cta_card_1_icon_font_awesome}}
                        {{else}}
                          {{settings.cta_card_1_icon_emoji}}
                        {{/if}}
                      </div>
                      <div class="cta-content">
                        <span class="cta-title">{{settings.cta_card_1_title}}</span>
                        <span class="cta-desc">{{settings.cta_card_1_description}}</span>
                      </div>
                    </div>
                    <span class="cta-cta">
                      {{icon settings.cta_card_1_cta_icon}}
                      {{settings.cta_card_1_cta_text}}
                    </span>
                  </a>
                </li>
              {{/if}}

              {{#if settings.cta_card_2_enabled}}
                <li>
                  <a href={{settings.cta_card_2_url}} class="cta-card" aria-label={{settings.cta_card_2_title}}>
                    <div class="cta-top">
                      <div class="cta-icon">
                        {{#if (eq settings.cta_card_2_icon_type "font_awesome")}}
                          {{icon settings.cta_card_2_icon_font_awesome}}
                        {{else}}
                          {{settings.cta_card_2_icon_emoji}}
                        {{/if}}
                      </div>
                      <div class="cta-content">
                        <span class="cta-title">{{settings.cta_card_2_title}}</span>
                        <span class="cta-desc">{{settings.cta_card_2_description}}</span>
                      </div>
                    </div>
                    <span class="cta-cta">
                      {{icon settings.cta_card_2_cta_icon}}
                      {{settings.cta_card_2_cta_text}}
                    </span>
                  </a>
                </li>
              {{/if}}

              {{#if settings.cta_card_3_enabled}}
                <li>
                  <a href={{settings.cta_card_3_url}} class="cta-card" aria-label={{settings.cta_card_3_title}}>
                    <div class="cta-top">
                      <div class="cta-icon">
                        {{#if (eq settings.cta_card_3_icon_type "font_awesome")}}
                          {{icon settings.cta_card_3_icon_font_awesome}}
                        {{else}}
                          {{settings.cta_card_3_icon_emoji}}
                        {{/if}}
                      </div>
                      <div class="cta-content">
                        <span class="cta-title">{{settings.cta_card_3_title}}</span>
                        <span class="cta-desc">{{settings.cta_card_3_description}}</span>
                      </div>
                    </div>
                    <span class="cta-cta">
                      {{icon settings.cta_card_3_cta_icon}}
                      {{settings.cta_card_3_cta_text}}
                    </span>
                  </a>
                </li>
              {{/if}}

              {{#if settings.cta_card_4_enabled}}
                <li>
                  <a href={{settings.cta_card_4_url}} class="cta-card" aria-label={{settings.cta_card_4_title}}>
                    <div class="cta-top">
                      <div class="cta-icon">
                        {{#if (eq settings.cta_card_4_icon_type "font_awesome")}}
                          {{icon settings.cta_card_4_icon_font_awesome}}
                        {{else}}
                          {{settings.cta_card_4_icon_emoji}}
                        {{/if}}
                      </div>
                      <div class="cta-content">
                        <span class="cta-title">{{settings.cta_card_4_title}}</span>
                        <span class="cta-desc">{{settings.cta_card_4_description}}</span>
                      </div>
                    </div>
                    <span class="cta-cta">
                      {{icon settings.cta_card_4_cta_icon}}
                      {{settings.cta_card_4_cta_text}}
                    </span>
                  </a>
                </li>
              {{/if}}
            </ul>
          </div>
        </div>
      </section>
    {{/if}}
  </template>
}