// since on load we can only sample the color of the placeholder,
// we need to temporarily populate the input in order to sample the value color
const getValueColor = (ele, computedStyle) => {
  // to support setting dynamic values, we have to store the existing value
  // and re-set it if we are returning from this hack
  const origVal = ele.value;

  // eslint-disable-next-line no-param-reassign
  ele.value = '_';

  const valueColor = computedStyle.getPropertyValue('color');

  if (ele.value === '_') {
    // eslint-disable-next-line no-param-reassign
    ele.value = origVal;
  }

  return valueColor;
};

export const createExternalInputSlot = (slotName, targetSlotName) => {
  const slotEle = document.createElement('slot');

  slotEle.setAttribute('name', slotName);
  slotEle.setAttribute('slot', targetSlotName);

  return slotEle;
};

export const createExternalInputEle = (targetSlotName, type, autocompleteType, inputName) => {
  const inputEle = document.createElement('input');

  inputEle.setAttribute('slot', targetSlotName);
  inputEle.setAttribute('type', type);
  inputEle.setAttribute('name', inputName);
  inputEle.setAttribute('data-hidden-input', 'true');
  inputEle.setAttribute('autocomplete', autocompleteType);

  return inputEle;
};

// We apply the original input's style to the external-input.
// Eventually, the user should interact directly with the external input.
// We keep the original input
export const applyExternalInputStyles = (sourceInputEle, targetInputEle, labelType) => {
  // We set a timeout here to avoid "Double Print" cases,
  // caused by sampling the computed style before it's ready.
  setTimeout(() => {
    const computedStyle = getComputedStyle(sourceInputEle);
    // Get minimal set of computed theme properties to set on external input
    const height = computedStyle.getPropertyValue('height');
    const paddingLeft = computedStyle.getPropertyValue('padding-left');
    const paddingRight = computedStyle.getPropertyValue('padding-right');
    const fontSize = computedStyle.getPropertyValue('font-size');
    const fontFamily = computedStyle.getPropertyValue('font-family');
    const letterSpacing = computedStyle.getPropertyValue('letter-spacing');
    const caretColor = computedStyle.getPropertyValue('caret-color');

    const valueColor = getValueColor(sourceInputEle, computedStyle);

    const commonThemeStyles = [
      ['all', 'unset'],
      ['position', 'absolute'],
      ['background-color', 'transparent'],
      ['height', height],
      ['left', paddingLeft],
      ['right', paddingRight],
      ['font-size', fontSize],
      ['font-family', fontFamily],
      ['letter-spacing', letterSpacing],
      ['caret-color', caretColor], // this is for seeing caret when focusing on external input
      ['color', valueColor],
    ];

    commonThemeStyles.forEach(([key, val]) =>
      targetInputEle.style.setProperty(key, val, 'important')
    );

    // Handle floating label theme properties
    if (labelType === 'floating') {
      const marginBottom = computedStyle.getPropertyValue('margin-bottom');
      targetInputEle.style.setProperty('margin-bottom', marginBottom, 'important');
    }

    // sample and apply width only after original input is ready and fully rendered
    const width = computedStyle.getPropertyValue('width');
    targetInputEle.style.setProperty(
      'width',
      `calc(${width} - ${paddingLeft} - ${paddingRight}`,
      'important'
    );
  }, 0);
};
