export function format(first: string, middle: string, last: string): string {
  return (
    (first || '') +
    (middle ? ` ${middle}` : '') +
    (last ? ` ${last}` : '')
  );
}

export function getSvgValue ( iconName: string ) : string | false {
  let iconSvg = getComputedStyle(document.documentElement).getPropertyValue(`--icon-${iconName}-svg`);
  if (iconSvg) {
    iconSvg = iconSvg
      .replace('url("data:image/svg+xml;utf8,', '')
      .replace(`url('data:image/svg+xml;utf8,`, '')
      .replace('")','')
      .replace(`')`,'')
      .replace(/\\"/g,'"')
      .replace(/<svg/,'<svg id="iconSvg"')
      .replace(/%23/g,'#');
    return iconSvg;
  }else{
    return false;
  }
}

export function getColorValue ( color : string, variation : string ) : string | false {
  let textColorVar = getComputedStyle(document.documentElement).getPropertyValue(`--color${color ? `-${color}` : ''}${variation ? `-${variation}` : ''}-color`);
  if (textColorVar) {
    return textColorVar;
  }
  return false;
}

export function getTextColorValue ( color : string, variation : string ) : string | false {
  let textColorVar = getComputedStyle(document.documentElement).getPropertyValue(`--color${color ? `-${color}` : ''}-text${variation ? `-${variation}` : ''}-color`);
  if (textColorVar) {
    return textColorVar;
  }
  return false;
}

export function spacingAroundSides ( values: string ) {
  const valuesArr = values.split(" ");
  let valuesStr = `0;/* wrong number of params */`;
  switch (valuesArr.length) {
    case 1:
      valuesStr = `${wrapValueInUnit(valuesArr[0])}`;
      break;
    case 2:
      valuesStr = `${wrapValueInUnit(valuesArr[0])} ${wrapValueInUnit(valuesArr[1])}`;
      break;
    case 4:
      valuesStr = `${wrapValueInUnit(valuesArr[0])} ${wrapValueInUnit(valuesArr[1])} ${wrapValueInUnit(valuesArr[2])} ${wrapValueInUnit(valuesArr[3])}`;
      break;
    default:
      break;
  }
  // console.log("spacingAroundSides", values, valuesStr);
  return valuesStr;
}

export function wrapValueInUnit( value ) {
  let valueStr;
  if (value) {
    const valueArr = value.split("-");
    if (valueArr.length > 1) {
      const unit = valueArr[0];
      if (['col','colvw'].indexOf(unit) !== -1) {
        valueStr = `var( --${unit}-${parseInt(valueArr[1])} )`;
      }
    }else{
      if (
        valueArr[0].indexOf("px") === -1 &&
        valueArr[0] !== "auto"
      ) {
        valueStr = `var( --spacing-${parseInt(valueArr[0])} )`;
      }else{
        valueStr = valueArr[0];
      }
    }
  }
  // console.log("wrap", value, valueStr);
  return valueStr;
}

export function decorateLayoutStyles(style, padding, margin, gap, width, height ) {
  if (padding) {
    style['padding'] = spacingAroundSides(padding);
  }
  if ( margin) {
    style['margin'] = spacingAroundSides(margin);
  }
  if (gap) {
    style['--scu-flex-gap'] = `var( --spacing-${gap} )`;
  }
  if (width) {
    style['width'] = wrapValueInUnit(width);
  }
  if (height) {
    style['height'] = wrapValueInUnit(height);
  }
}