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

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

export class SCUFlex {

  @Prop({ reflect: true }) justifyContent: FlexJustifyContent = FlexJustifyContent.flexStart;
  @Prop({ reflect: true }) valign: FlexJustifyContent;

  @Prop({ reflect: true }) alignItems: FlexAlignItems = FlexAlignItems.flexStart;
  @Prop({ reflect: true }) align: FlexAlignItems;

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

  // =======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.align) {
      alignItems = this.align;
    }

    let justifyContent = this.justifyContent;
    if (this.valign) {
      justifyContent = this.valign;
    }

    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-v ${this.direction}`}
        style={style}>
        <slot />
      </Host>
    ); 
  } 
}