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,
})
export class Heading {
  @Prop() heading: HeadingVarians = HeadingVarians.default;
  @Prop() section: HeadingSectionVariants = HeadingSectionVariants.default;
  @Prop() negative: boolean = false;
  render() {
    const headingInVariants = this.heading in HeadingVarians;
    const classAttributes = ['hy-heading', this.negative ? 'negative' : ''];
    const sectionClassAttributes = [`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>
    );
  }
}