import { Component, ComponentInterface, Prop, h } from '@stencil/core';

@Component({
  tag: 'hy-cta-liftup-image-text',
  styleUrl: 'cta-liftup-image-text.scss',
  shadow: true,
})
export class CtaLiftupImageText implements ComponentInterface {
  @Prop() imageRight: boolean = false;
  @Prop() imageUrl: string = null;
  @Prop() imageAlt: string = "";
  @Prop() textTitle?: string;
  @Prop() textDescription: string = null;
  @Prop() mainUrl?: string;
  @Prop() mainUrlTitle?: string;
  @Prop() mainUrlAriaLabel?: string;
  @Prop() mainUrlIsExternal: boolean = false;
  @Prop() standaloneUrl?: string;
  @Prop() standaloneUrlTitle?: string;
  @Prop() standaloneUrlAriaLabel?: string;
  @Prop() standaloneUrlIsExternal: boolean = false;
  @Prop() standaloneUrl2?: string;
  @Prop() standaloneUrlTitle2?: string;
  @Prop() standaloneUrlAriaLabel2?: string;
  @Prop() standaloneUrlIsExternal2: boolean = false;

  render() {
    const classAttributes = [
      "hy-cta-liftup-image-text",
      this.imageRight ? "hy-cta-liftup-image-text--right-image" : null
    ].join(" ");
    const contentClassAttributes = [
      "hy-cta-liftup-image-text__text-container",
      this.imageRight ? "hy-cta-liftup-image-text__text-container--left" : "hy-cta-liftup-image-text__text-container--right"
    ].join(" ");
    const imageRightClassAttributes = [
      "hy-cta-liftup-image-text__image-container",
      "hy-cta-liftup-image-text__image-container--right"
    ].join(" ");
    const imageLeftClassAttributes = [
      "hy-cta-liftup-image-text__image-container"
    ].join(" ");

    const imageLeft = !this.imageRight;
    const aspectRatioWidth = 4;
    const aspectRatioHeight = 3;

    return (
      <div class={classAttributes}>
        { imageLeft &&
          <div class={imageLeftClassAttributes}>
            <hy-image
              image-url={this.imageUrl}
              image-alt={this.imageAlt}
              aspect-ratio-width={aspectRatioWidth}
              aspect-ratio-height={aspectRatioHeight}
              caption="">
            </hy-image>
          </div>
        }
        <div class={contentClassAttributes}>
          <div class="hy-cta-liftup-image-text__text-container__title">{ this.textTitle }</div>
          <div class="hy-cta-liftup-image-text__text-container__description">{ this.textDescription }</div>
          {this.mainUrl &&
            <div class="hy-cta-liftup-image-text__text-container__link">
              <hy-cta-link-button
                link-content={this.mainUrlTitle}
                aria-label={this.mainUrlAriaLabel}
                url={this.mainUrl}
                is-external={this.mainUrlIsExternal}
              />
            </div>
          }
          {this.standaloneUrl &&
            <div class="hy-cta-liftup-image-text__text-container__standalonelink">
              <hy-standalone-link
                link-content={this.standaloneUrlTitle}
                aria-label={this.standaloneUrlAriaLabel}
                url={this.standaloneUrl}
                is-external={this.standaloneUrlIsExternal}
              />
            </div>
          }
          {this.standaloneUrl2 &&
            <div class="hy-cta-liftup-image-text__text-container__standalonelink">
              <hy-standalone-link
                link-content={this.standaloneUrlTitle2}
                aria-label={this.standaloneUrlAriaLabel2}
                url={this.standaloneUrl2}
                is-external={this.standaloneUrlIsExternal2}
              />
            </div>
          }
        </div>
        { this.imageRight &&
          <div class={imageRightClassAttributes}>
            <hy-image
              image-url={this.imageUrl}
              image-alt={this.imageAlt}
              aspect-ratio-width={aspectRatioWidth}
              aspect-ratio-height={aspectRatioHeight}
              caption="">
            </hy-image>
          </div>
        }
      </div>
    );
  }
}