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

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

export class SCUFlexH {

  @Prop({ reflect: true }) justifyContent: FlexJustifyContent = FlexJustifyContent.flexStart;
  @Prop({ reflect: true }) align: FlexJustifyContent | Align;

  @Prop({ reflect: true }) alignItems: FlexAlignItems = FlexAlignItems.flexStart;
  @Prop({ reflect: true }) valign: FlexAlignItems | Valign;

  @Prop({ reflect: true }) direction: FlexDirection = FlexDirection.h;

  // =======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() {

    let alignItems = this.alignItems;
    if (this.valign) {
      if (this.valign === Valign.bottom ) {
        alignItems = FlexAlignItems.flexEnd;
      }else if (this.valign === Valign.top ) {
        alignItems = FlexAlignItems.flexStart;
      }else if (this.valign === Valign.center ) {
        alignItems = FlexAlignItems.center;
      }else{
        alignItems = this.valign;
      }
    }

    let justifyContent = this.justifyContent;
    if (this.align) {
      if (this.align === Align.right ) {
        justifyContent = FlexJustifyContent.flexEnd;
      }else if (this.align === Align.left ) {
        justifyContent = FlexJustifyContent.flexStart;
      }else if (this.align === Align.center ) {
        justifyContent = FlexJustifyContent.center;
      }else{
        justifyContent = this.align;
      }
    }

    const style = {
      justifyContent,
      alignItems,
      display:'flex',
      flexDirection:this.direction
    };

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

    return (
      <Host class={`comp-scu-flex-h ${this.direction}`}
        style={style}>
        <slot />
      </Host>
    ); 
  } 
}