import { Component, Prop, h } from '@stencil/core';
import {
  getSvgValue,
  getColorValue,
  decorateLayoutStyles
} from '../../utils/utils'

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

export class SCUIcon {

  @Prop({ reflect: true }) icon: string | undefined = 'placeholder';
  @Prop({ reflect: true }) color: string = 'icon';
  @Prop({ reflect: true }) colorVar: string | undefined;
  @Prop({ reflect: true }) colorVariation: string;
  @Prop({ reflect: true }) size: number = 24;// 12, 16, 24, 32, 48, 64

  // =======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 error = "";

    let finalColor;
    if ( this.colorVar ) {
      finalColor = `var( ${this.colorVar} )`;
    }else{
      const color = getColorValue(this.color, this.colorVariation);
      if (color) {
        finalColor = color;
      }else{
        error = "error_color";
      }
    }

    // SVG
    const iconSvg = getSvgValue(this.icon);
    let finalSvg : string = '';
    if (iconSvg) {
      finalSvg = iconSvg;
    }else{
      error = "error_svg";
    }

    const styles = {
      '--svg-color': finalColor
    };

    decorateLayoutStyles(styles, undefined, this.margin, undefined, undefined, undefined );

    return (
      <div 
        class={`size_${this.size} ${error}`}
        style={styles}
        innerHTML={finalSvg}>
      </div>
    ); 
  } 
}