import {Component, Element, Prop, h, Host} from '@stencil/core';
import {CtaLinkButtonVariants} from '../../utils/utils';

@Component({
  tag: 'hy-banner',
  styleUrl: 'hy-banner.scss',
  shadow: false,
})
export class HyBanner {
  @Prop() textTitle?: string;
  @Prop() textDescription: string = null;
  @Prop() url?: string;
  @Prop() scLabel?: string;
  @Prop() urlTitle?: string;
  @Prop() headerstyle: string = 'common';
  @Element() el: HTMLElement;

  componentDidLoad() {
    let hyMainDiv = this.el.closest('.hy-main');
    if (hyMainDiv) {
      if (!hyMainDiv.classList.contains('with-sidebar')) {
        this.headerstyle = 'large';
      }
    }
  }

  render() {
    const hyBannerClass = ['hy-banner', this.headerstyle].join(' ');
    const hyBannerWrapperClass = ['hy-banner__info-container'].join(' ');
    const variant = CtaLinkButtonVariants.onBlueBkgd;

    return (
      <Host>
        <hy-box pt="4" />
        <div class={hyBannerClass}>
          <hy-main-content-wrapper>
            <div class={hyBannerWrapperClass}>
              <div class="hy-banner__info-container__title">{this.textTitle}</div>
              <div class="hy-banner__info-container__description">{this.textDescription}</div>
              {this.url && (
                <div class="hy-banner__info-container__link">
                  <hy-cta-button
                    link-content={this.urlTitle}
                    sc-label={this.scLabel}
                    url={this.url}
                    is-external="false"
                    variant={variant}
                  />
                </div>
              )}
            </div>
          </hy-main-content-wrapper>
        </div>
        <hy-box pb="3, 5, 6" />
      </Host>
    );
  }
}