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

@Component({
  tag: 'hy-heading',
  styleUrls: {default: 'heading.scss', wide: 'heading-fw.scss'},
  scoped: true,
  shadow: false,
})
export class Heading {
  /**
   * @type {*}
   */
  @Prop() heading: HeadingVarians = HeadingVarians.default as any;
  /**
   * @type {*}
   */
  @Prop() section: HeadingSectionVariants = HeadingSectionVariants.default as any;
  @Prop() negative: boolean = false;

  render() {
    const headingInVariants = this.heading in HeadingVarians;
    const classAttributes = [
      'hy-heading',
      this.negative ? 'negative' : '',
      `hy-heading__${this.section}`,
      //this.section == 'introduction' ? 'hy-heading__introduction' : '',
      //this.section == 'landingsection' ? `hy-heading__landingsection` : '',
      //this.section == 'contentsection' ? `hy-heading__contentsection` : '',
    ];
    //const sectionClassAttributes = [this.section == 'subsection' ? `hy-heading__${this.section}` : ''].join(' ');
    const sectionClassAttributes = [
      `hy-heading__${this.section}`,
      //this.section == 'subsection' ? `hy-heading__${this.section}` : '',
      //this.section == 'landingsection' ? `hy-heading__${this.section}` : '',
      //this.section == 'contentsection' ? `hy-heading__${this.section}` : '',
    ].join(' ');

    const containerSectionClass = ['hy-heading__container', `hy-heading__container__${this.section}`].join(' ');
    return (
      <Host>
        {headingInVariants ? (
          <div class={containerSectionClass}>
            <this.heading class={classAttributes.join(' ')}>
              <slot />
            </this.heading>

            <span class={sectionClassAttributes}></span>
          </div>
        ) : (
          <div class={containerSectionClass}>
            <HeadingVarians.default class={classAttributes.join(' ')}>
              <slot />
            </HeadingVarians.default>

            <span class={sectionClassAttributes}></span>
          </div>
        )}
      </Host>
    );
  }
}