import { Component, Prop, h, Host } from '@stencil/core';
import { 
  Align,
  Valign,
  ColorVariations
} from '../../utils/types';
import {
  getTextColorValue,
  decorateLayoutStyles
} from '../../utils/utils';

@Component({
  tag: 'scu-text',
  styleUrl: 'scu-text.scss',
  shadow: true
})

export class SCUText { 

  @Prop({ reflect: true }) size: number = 5;
  @Prop({ reflect: true }) align: Align = Align.left;
  @Prop({ reflect: true }) valign: Valign = Valign.top;
  @Prop({ reflect: true }) color: string;
  @Prop({ reflect: true }) colorVariation: ColorVariations;

  @Prop({ reflect: true }) bold: boolean = false;
  @Prop({ reflect: true }) semiBold: boolean = false;

  // =======START LAYOUT========
  // spacing increment default, then col or colvw, then 10px or auto.
  @Prop({ reflect: true }) padding: string;
  @Prop({ reflect: true }) margin: string;
  @Prop({ reflect: true }) width: string;
  @Prop({ reflect: true }) height: string;
  @Prop({ reflect: true }) gap: number = 0;
  // ========END LAYOUT=========

  render() {
    const colorVar = getTextColorValue( this.color, this.colorVariation );

    let error = "";
    let style = {};
    if (colorVar) {
      style = {color: colorVar};
    }else{
      error = "no_color"
    }

    decorateLayoutStyles(
      style,
      this.padding,
      this.margin,
      this.gap,
      this.width,
      this.height
    );

    return (
      <Host class={`
        comp-scu-text
        size_${this.size}${this.bold ? `_bold` : ''}${this.semiBold ? `_semibold` : ''}
        align_${this.align}
        valign_${this.valign}
        ${error}
      `} style={style}>
        <slot /> 
      </Host>
    ); 
  } 
}